javascript - D3 气泡示例：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()since bubble=d3.layout.pack()。诀窍是pack.nodes()硬编码以使用value输入的键children（在本例中为所有包）来调整节点的大小（add r）并确定位置（addx和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 的回答触及了大部分内容，但我觉得它需要更多解释（至少对我来说是这样）。

Answer 2

classes() 函数不添加属性.. 它只是展平树。属性被添加到bubble.nodes() 中（即d3.layout.pack().nodes()）

JSON.stringify(classes[0])
"{"packageName":"cluster","className":"AgglomerativeCluster","value":3938}"