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