嵌套SVG选择在D3

Question

我有n个关联数组列表。

[{'path': 'somepath', 'relevant': [7, 8, 9]}, {'path': 'anotherpath', 'relevant': [9], ...}

在一个大的SVG，我想：一）创建rects（ “桶”），其尺寸是成正比的'relevant'子列表的长度，和b）创建rects（ “块”），对于子列表中的每个元素，放置在它们各自的桶中“内部”。

在阅读Mike Bostock对similar question的回应之后，我确定我需要使用组（g）元素将这些部分组合在一起。我可以得到下面的代码生成我想要的DOM树，但我难倒如何件的y值的代码。在我需要这个值的地方，D3正在遍历子数组。当i不再指向较大数组中的索引时，如何获得当前从其中迭代的子数组的索引？

var piece_bukcets = svg.selectAll("g.piece_bucket") 
         .data(files) 
         .enter() 
         .append("g") 
         .attr("class", "piece_bucket") 
         .attr("id", function (d, i) { return ("piece_bucket" + i) }) 
         .append("rect") 
         .attr("y", function (d, i) { return (i * 60) + 60; }) 
         .attr("class", "bar") 
         .attr("x", 50) 
         .attr("width", function (d) { 
         return 10 * d["relevant"].length; 
         }) 
         .attr("height", 20) 
         .attr("fill", "red") 
         .attr("opacity", 0.2) 

     var pieces = svg.selectAll("g.piece_bucket") 
         .selectAll("rect.piece") 
         .data(function (d) { return d["relevant"]; }) 
         .enter() 
         .append("rect") 
         .attr("class", "piece") 
         .attr("id", function (d) { return ("piece" + d) }) 
         .attr("y", ????) // <<-- How do I get the y value of d's parent? 
         .attr("x", function (d, i) { return i * 10; }) 
         .attr("height", 10) 
         .attr("width", 10) 
         .attr("fill", "black"); 

是否有d的方法可用来发现它是目前内部节点的指数？在这种情况下，有没有一种方法可以调用“piece”来查找其父“bucket”的索引？

Answer 1

可以使用秘密第三个参数功能：

.attr("y", function(d, i, j) { 
    // j is the i of the parent 
    return (j * 60) + 60; 
}) 

有但是一个简单的方法。您可以简单地翻译g元素，并且添加到它的所有内容都将落实到位。

var piece_buckets = svg.selectAll("g.piece_bucket") 
        .data(files) 
        .enter() 
        .append("g") 
        .attr("class", "piece_bucket") 
        .attr("transform", function(d, i) { 
        return "translate(0," + ((i*60) + 60) + ")"; 
        }) 
        .attr("id", function (d, i) { return ("piece_bucket" + i) }); 
piece_buckets.append("rect") 
        .attr("class", "bar") 
        .attr("x", 50) 
        .attr("width", function (d) { 
        return 10 * d["relevant"].length; 
        }) 
        .attr("height", 20) 
        .attr("fill", "red") 
        .attr("opacity", 0.2); 

var pieces = piece_buckets.selectAll("rect.piece") 
        .data(function (d) { return d["relevant"]; }) 
        .enter() 
        .append("rect") 
        .attr("class", "piece") 
        .attr("id", function (d) { return ("piece" + d); }) 
        .attr("x", function (d, i) { return i * 10; }) 
        .attr("height", 10) 
        .attr("width", 10) 
        .attr("fill", "black");