javascript – D3泡泡示例:bubble.nodes()有什么作用?

前端之家收集整理的这篇文章主要介绍了javascript – D3泡泡示例:bubble.nodes()有什么作用?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
示例: 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的回答触及了大部分内容,但我觉得需要更多解释(至少它对我有用).

猜你在找的JavaScript相关文章