使用数据集中的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");