D3 Bubble示例：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的回答觸及了大部分內容，但我覺得需要更多解釋（至少它對我有用）。

Answer 2

classes（）函數不添加屬性..它只是使樹變平。 這些屬性添加在bubble.nodes（）中（即d3.layout.pack（）。nodes（））

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