<html>
<head>
<meta charset="utf-8">
<!--script type="text/javascript" src="https://d3js.org/d3.v6.min.js"></script-->
<script type="text/javascript" src="d3.js"></script>
<script type="text/javascript" src="demo2.js?r=12s"></script>
</head>
<body onload="demo2()">
<svg id="sticker" width="600" height="300" style="background: lightgrey"/>
<p>hello,today is a good day!</p>
</body>
</html>
function sticker(sel,label){
sel.append("rect").attr("rx",5).attr("ry",5)
.attr("width",70).attr("height",30)
.attr("x",-35).attr("y",-15)
.attr("fill","none").attr("stroke","blue")
.classed("frame",true);
sel.append("text").attr("x",0).attr("y",5)
.attr("text-anchor","middle")
.attr("font-family","sans-serif").attr("font-size",14)
.classed("label",true)
.text(label?label:d=>d);
}
function demo2()
{
var labels=["hello","world"];
var scX=d3.scaleLinear().domain([0,labels.length-1]).range([100,500]);
var scY = d3.scaleLinear().domain([0,labels.length-1]).range([50,150]);
d3.select("#sticker")
.selectAll("g").data(labels).enter().append("g")
.attr("transform",(d,i)=>"translate("+scX(i)+","+scY(i)+")")
.call(sticker);
d3.select("#sticker").append("g")
.attr("transform","translate(175,150)")
.call(sticker,"cool")
.selectAll(".label").attr("fill","red");
}