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

【问题标题】：Add two different svg element in g element of svg using d3.js from a dataset使用数据集中的 d3.js 在 svg 的 g 元素中添加两个不同的 svg 元素
【发布时间】：2015-10-24 14:38:30
【问题描述】：

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

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");

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

提前致谢

【问题讨论】：

标签： javascript css d3.js svg

【解决方案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");

【讨论】：