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

Question

Example: http://mbostock.github.com/d3/ex/bubble.html

I find it difficult to understand what is happening with line 16:

.data(bubble.nodes(classes(json)) 

And why, or where inside the classes () function, the variable classes [] get the x, y, r values ​​defined for each of their objects. Also, bubble.nodes () is not an actual function?

If I add

 console.log(classes) 

between lines 44 and 45 - each object inside is apparently populated by x, y, r already, but it’s not obvious why this happens.

Answer 1

Calling bubble.nodes() boils down to calling d3.layout.pack().nodes() with bubble=d3.layout.pack() . The trick is that pack.nodes() hard-coded to use the value key of the children input (in this case, all packages) to determine the size of the nodes (add r ) and determine the position (add x and y ).

In fact,

  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" ar, x, and y based on value bubble.nodes(root); 

This also worked, you can see that classes() does not add r , x and y , since classes(root) does not have these attributes. the red answer affected most of this, but I felt that he needed to explain a little more (at least it was for me).

Answer 2

The classes () function does not add attributes .. it just smooths the tree. Attributes are added inside bubble.nodes () (this is d3.layout.pack (). Nodes ())

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