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

Question

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

I'm having a hard time understanding what goes on with line 16:

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

And why, or where within the classes() function, the variable classes[] gets x,y,r values defined for each of its objects. Also, bubble.nodes() doesn't appear to be an actual function?

If I add a

console.log(classes)

between lines 44 and 45 - every object inside seems to be populated with x,y,r already -- but it is not apparent why this happens.

Answer 1

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

Answer 2

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}"