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属性似乎已经被赋值了，但不清楚为什么会这样。

- kratsg

---

你看过pack.nodes的API参考文档了吗？ - mbostock

是的 - 我做了。但它没有解释为什么函数内的“classes”具有在基于bubble.nodes之前分配的额外属性。文档也没有解释“r”属性。 - kratsg

“r” 属性是由布局计算出的节点半径。 - mbostock

在执行classes()函数时，属性何时添加到classes[]数组中的每个元素中？ - kratsg

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的回答已经涉及了大部分内容，但我觉得需要更多解释（至少对我来说是如此）。

- sushain97

Answer 2

classes()函数不会添加属性，它只是将树展平。属性是在bubble.nodes()（即d3.layout.pack().nodes()）内部添加的。

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

- krasnaya