在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元素？

Answer 1

使用G(组)元素.使用单个数据连接创建G元素,然后追加rect和text元素.例如:

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