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