D3中的嵌套SVG选择 [英] Nested SVG selections in D3

问题描述

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

[{'path'：'somepath'，'relevant'：[7,8,9]}，{'path'：'在一个大的SVG内，我想要：a）创建rects（）;在一个大的SVG中， （buckets），其尺寸与它们的'相关'子列表的长度成比例，以及b）创建rect

阅读Mike Bostock对类似问题，我敢肯定，我需要使用组（g）元素将组合在一起。我可以得到下面的代码来生成我想要的DOM树，但我很遗憾如何编写的 y 的值。在我需要该值的点，D3在子阵列上迭代。当 i 不再指向较大数组中的索引时，如何获取当前子矩阵的索引？

  var piece_bukcets = svg.selectAll（g.piece_bucket）
 .data（files）
 .enter b $ b .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 [相关]; } 
 .att（id，function（d））
。 ）{return（piece+ d）}）
 .attr（y，????）//<<  - 如何获取父节点的y值？ 
 .attr（x，function（d，i）{return i * 10;}）
 .attr（height，10）
 .attr ）
 .attr（fill，black）; 
  

有 d 找到它当前在里面的节点的索引？在这种情况下，是否有一个方法我可以调用一个块找到它的父桶的索引？

解决方案

p>您可以使用函数的秘密第三个参数：

  .attr（y j）{
 // j是父节点的i 
 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）{
 returntranslate（0，+（（i * 60）+60） +）; 
}）
 .attr（id，function（d，i）{return（piece_bucket+ i）}）; 
 piece_buckets.append（rect）
 .attr（class，bar）
 .attr（x，50）
。 ，function（d）{
 return 10 * d [relevant]。length; 
}）
 .attr（height，20）
 .attr ，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）; 
  

I have a list of n associative arrays.

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

Within a large SVG, I want to: a) create rects ("buckets") whose dimensions are proportional to the lengths of their 'relevant' sublists, and b) create rects ("pieces"), for each of the elements in the sublists, placed "inside" their respective buckets.

After reading Mike Bostock's response to a similar question, I'm sure that I need to use group ("g") elements to group the pieces together. I can get the code below to produce the DOM tree that I want, but I'm stumped on how to code the y values of the pieces. At the point where I need the value, D3 is iterating over the subarrays. How can I get the index of the current subarray that I'm iterating over from inside it when i no longer points to the index within the larger array?

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

Is there a method on d available to find the index of the node it's currently inside? In this case, is there a method I can call on a "piece" to find the index of its parent "bucket"?

解决方案

You can use the secret third argument to the function:

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

There's a simpler way however. You can simply translate the g element and everything you add to it will fall into place.

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

这篇关于D3中的嵌套SVG选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！