javascript - 使用数据集中的 d3.js 在 svg 的 g 元素中添加两个不同的 svg 元素

Question

我想根据数据集向svg的每个组元素添加一个圆圈和一个文本元素，类似于下图。

var dataset=[1,4];
<g>
<circle cx="100" cy="100" r="20" fill="blue"></circle>
<text x="100" y="100" fill="white">Hello World</text>
</g>
<g>
<circle cx="100" cy="100" r="20" fill="blue"></circle>
<text x="100" y="100" fill="white">Hello World</text>
</g>

下面是我的工作示例代码。

var svgSelection2=d3.select("#div-svg2").append("svg")
.attr("width",900)
.attr("height",500)
.style("background-color","lightgreen");

var dataset=[1,4];
var group=svgSelection2.selectAll("g")
.data(dataset2)
.enter()
.append("g");

var circles=group.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx",function(d,i){ return d*100 ;})
.attr("cy",100)
.attr("r",function(d,i){ return d*20;})
.attr("fill","blue");


var textElement=group.selectAll("text")
.data(dataset)
.enter()
.append("text")
.attr("x",function(d,i){return d*100;})
.attr("y",100)
.text("Hello World")
.attr("fill","white");

此代码向每个组元素附加两个圆圈和两个元素。

提前致谢

Answer 1

您不需要再次输入相同的数据集，因此您可以这样做

var svgSelection2=d3.select("#div-svg2").append("svg")
        .attr("width",900)
        .attr("height",500)
        .style("background-color","lightgreen");

var dataset=[1,4];
var group=svgSelection2.selectAll("g")
        .data(dataset)
        .enter()
        .append("g");

var circles = group.append("circle")
        .attr("cx",function(d,i){ return d*100 ;})
        .attr("cy",100)
        .attr("r",function(d,i){ return d*20;})
        .attr("fill","blue");

var textElement=group.append("text")
        .attr("x",function(d,i){return d*100;})
        .attr("y",100)
        .text("Hello World")
        .attr("fill","white");