示例:
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,r – 但是为什么会发生这种情况并不明显.
解决方法
由于bubble = d3.layout.pack(),对bubble.nodes()的调用归结为对
d3.layout.pack().nodes()
的调用.诀窍是pack.nodes()被硬编码以使用输入子节点的值键(在本例中为所有包)来调整节点的大小(添加r)并确定位置(添加x和y).
在本质上,
var root = {"children": [ {"packageName":"cluster","className":"AgglomerativeCluster","value":3938},{"packageName":"cluster","className":"CommunityStructure","value":3812},"className":"HierarchicalCluster","value":6714},"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,因为类(root)没有这些属性. krasnaya的回答触及了大部分内容,但我觉得需要更多解释(至少它对我有用).