D3 Bubble Example: What does bubble.nodes() do? D3 Bubble Example: What does bubble.nodes() do? json json

D3 Bubble Example: What does bubble.nodes() do?


The call to bubble.nodes() boils down to a call to d3.layout.pack().nodes() since bubble=d3.layout.pack(). The trick is that pack.nodes() is hardcoded to use the value key of the input's children (in this case all the packages) to size the nodes (add r) and determine position (add x and y).

In essence,

 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); 

This tripped me up at first as well, you can see that classes() doesn't add r, x, and y since classes(root) doesn't have those attributes. krasnaya's answer touched on most of this but I felt that it needed a bit more explaining (at least it did for me).


The classes() function doesn't add the attributes.. it just flattens the tree. The attributes are added inside bubble.nodes() (which is d3.layout.pack().nodes())

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