基本包布局示例中的数据是如何附加的？

Question

D3.js 包布局的

One of Mike Bostock's relatively simple examples 有一些让我感到困惑的特征。我无法弄清楚数据是如何映射到其他元素的。有人可以解释发生了什么吗？我将以编号问题的形式表达我的困惑，但许多问题是密切相关的。（甚至可能是我只有一个简单的误会。）

示例，来自上面的link：

var pack = d3.layout.pack()
    .size([diameter - 4, diameter - 4])
    .value(function(d) { return d.size; });

// ... define the svg object here

d3.json("flare.json", function(error, root) {
  var node = svg.datum(root).selectAll(".node")
      .data(pack.nodes)
    .enter().append("g")
      .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

评论：

首先请注意，在pack的定义中——包布局实例——没有附加数据。这将在下面很重要。

读取数据文件 "flare.json" 后，我们将文件中的数据 (root) 附加到 svg object: svg.datum(root)。 datum() 是做什么的？它是“sets the element's bound data to the specified value on all selected elements”（不进行连接——也就是说，如果调用 enter() 或 exit() 将不会返回任何内容，我猜。

但等一下。没有选择任何元素！ root 将附加到什么？还是我们说svg是单元素选集？ [问题1]

好的，现在我们 "node" class 的 selectAll 个实例。还有none，不过没关系；这是一个 D3 连接选择。在进行选择之前添加数据有点奇怪，但是没关系。

接下来我们使用 data() 将数据添加到选择中：.data(pack.nodes)。好的，这是正常模式：Select，然后添加数据。可是等等。 pack.nodes 里有什么？请记住，我们没有向 pack 发送任何数据。我们只是没有向空选择中添加任何数据吗？ [问题 2a]

或者我们是否添加了单个数据元素，即 pack.nodes 中的 null (??)？ [问题 2b]

也许除了 null，我们在这个 pint 中使用的唯一数据是我们使用 svg.datum() 添加的数据。这是在这里发挥作用吗？如何？ [问题3]

下一行是 .enter() 调用，通常在 .data() 之后，它为我们提供了每个无法与现有 SVG 元素匹配的数据元素的 SVG 占位符.但据我所知，我们没有 SVG 元素，也没有数据元素。或者我们可能只有一个数据元素，来自 pack.nodes 的那个。所以 .append("g") 给我们 0 或 1 <g></g>s。那是对的吗？但是用于为g元素定义"class"值的函数似乎假定会有多个g。此时怎么会有多个g元素呢？ [问题4]

（感谢阅读到这里！）

Answer 1

您问题的简短答案是 pack.nodes 是 function。此函数以 root 数据作为参数调用。

Q1：svg 是单个 <g> 元素的选择。见代码：

var svg = d3.select("body").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(2,2)");

Q2、Q3：data(pack.nodes)展开如下：

nodes = pack.nodes(svg.datum()) //call the function with the attached data.
data(nodes)

这些行将附加一个 nodes 数组，对于它们中的每一个，一个 .node 元素将被 entered。

Q4：我想这个问题现在应该有答案了。

让我知道是否仍然不清楚。

基本包布局示例中的数据是如何附加的？

How is data attached in basic pack layout example?

svg

d3.js