javascript - D3 气泡示例 : What does bubble. nodes() 做什么？

Question

示例:http://mbostock.github.com/d3/ex/bubble.html

我很难理解第 16 行发生了什么:

.data(bubble.nodes(classes(json))

为什么，或者在 classes() 函数中，变量 classes[] 获得为其每个对象定义的 x、y、r 值。另外，bubble.nodes() 似乎不是一个实际的函数？

如果我添加一个

console.log(classes)

在第 44 行和第 45 行之间 - 内部的每个对象似乎都已经填充了 x,y,r - 但不清楚为什么会发生这种情况。

Answer 1

对 bubble.nodes() 的调用归结为对 d3.layout.pack().nodes() 的调用自 bubble=d3.layout.pack()。诀窍是 pack.nodes() 被硬编码为使用输入的 children(在本例中为所有包)的 value 键来调整节点大小(添加 r)并确定位置(添加 x 和 y)。

本质上，

 var root = {"children": [
              {"packageName":"cluster","className":"AgglomerativeCluster","value":3938},
              {"packageName":"cluster","className":"CommunityStructure","value":3812},
              {"packageName":"cluster","className":"HierarchicalCluster","value":6714},
              {"packageName":"cluster","className":"MergeEdge","value":743}
         ]}; // This is an excerpt of the real data.

 var bubble = d3.layout.pack(); 

 // pack.nodes() assigns each element of "children" a r, x, and y based on value
 bubble.nodes(root); 

一开始这也让我感到困惑，你可以看到 classes() 没有添加 r、x 和 y 因为 classes(root) 没有这些属性。 krasnaya 的回答触及了大部分内容，但我觉得它需要更多解释(至少对我来说是这样)。