d3.js中创建嵌套的SVG节点

Question

我刚开始使用d3js，发现需要为每个要链接到背景数据结构的元素创建多个选择器。例如，为了制作带注释的条形图，需要分别创建覆盖文本和矩形的选择器。

svg.selectAll("rect")
.data(data)
.enter()
    .append("rect")
    .attr('y',function(d,i){return i*10;})
    .attr('height',10)
    .attr('width',function(d){return d.interestingValue})
    .fill('#00ff00');

svg.selectAll("text")
.data(data)
.enter()
    .append("text")
    .attr('y',function(d,i){return i*10;})
    .fill('#0000ff')
    .text(function(d){return d.interestingValue});

有没有更方便的方法将这些组合成一个单一的选择器和enter()链，同时创建rects和text元素？

- Baxter

Answer 1

使用G (group)元素。使用单个数据连接来创建G元素，然后附加矩形和文本元素。例如：

var g = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d) { return "translate(0," + i * 10 + ")"; });

g.append("rect")
    .attr("height", 10)
    .attr("width", function(d) { return d.interestingValue; });

g.append("text")
    .text(function(d) { return d.interestingValue; });

- mbostock

---

这来自于这位先生自己！感谢回复和出色的图书馆。 - Baxter

除非我对子元素使用.data()设置数据绑定，否则我无法使其适用于动态数据更新。使用上述代码，对g绑定的数据进行更新会重新绘制g内使用最初绑定的数据的元素。 - Jim Hunziker

正确的做法是将数据绑定到父元素，并不会自动将其传播到子元素。为了从父级向子级传播数据，您需要执行以下操作之一：data、datum、select、append或insert。还可以参考我关于嵌套选择的教程。 - mbostock