Вложенные выборки SVG в D3

Question

У меня есть список n ассоциативных массивов.

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

В большом SVG, я хочу: а) создать прямоугольники («ковши»), размеры которых пропорциональна длиной их 'relevant' подсписков, и б) создает прямоугольники («куски»), для каждого из элементов в подсписках помещены «внутри» своих соответствующих ведер.

После прочтения ответа Майка Бостока на вопрос 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 доступны для поиска индекса узла это в настоящее время внутри? В этом случае существует ли способ, которым я могу вызвать «кусок», чтобы найти индекс его родительского «ведра»?

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