Javascript D3中的嵌套SVG选择

我有一个n个关联数组的列表

[{'path'：'somepath'，'relevant'：[7,8,9]}，{'path'：'anotherpath'，'relevant'：[9]，…}

在大型SVG中，我想：a）创建矩形（“bucket”），其尺寸与

“相关的”

子列表的长度成比例；b）为子列表中的每个元素创建矩形（“片段”），放置在各自的bucket中

在阅读了Mike Bostock对a的回应之后，我确信我需要使用group（“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");

var piece\u bukcets=svg.selectAll（“g.piece\u bucket”）
.数据（文件）
.输入（）
.附加（“g”）
.attr（“类”、“件/桶”）
.attr（“id”，函数（d，i）{return（“piece_bucket”+i）}）
.append（“rect”）
.attr（“y”，函数（d，i）{return（i*60）+60；}）
.attr（“类”、“条”）
.attr（“x”，50）
.attr（“宽度”，函数（d）{
返回10*d[“相关”]。长度；
})
.attr（“高度”，20）
.attr（“填充”、“红色”）
.attr（“不透明度”，0.2）
var pieces=svg.selectAll（“g.pieces\u bucket”）
.selectAll（“矩形块”）
.data（函数（d）{返回d[“相关”]；}）
.输入（）
.append（“rect”）
.attr（“类”、“件”）
.attr（“id”，函数（d）{return（“工件”+d）}）
.attr（“y”，？）/您可以将第三个秘密参数用于函数：

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

您可以对函数使用secret第三个参数：

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