D3 Ejemplo de burbuja: ¿Qué hace bubble.nodes()?

Question

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

estoy teniendo dificultades para entender lo que pasa con la línea 16:

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

Y por qué, o cuando dentro de las clases() función, la variable classes [] obtiene los valores x, y, r definidos para cada uno de sus objetos. Además, bubble.nodes() no parece ser una función real?

Si agrego un

console.log(classes) 

entre las líneas 44 y 45 - cada objeto dentro parece estar poblada con x, y, r ya - pero no es evidente por qué sucede esto.

Answer 1

La función classes() no agrega los atributos .. simplemente aplana el árbol. Los atributos se añaden dentro bubble.nodes() (que es d3.layout.pack(). Nodos())

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

Answer 2

La llamada a bubble.nodes() se reduce a una llamada a d3.layout.pack().nodes() desde bubble=d3.layout.pack(). El truco es que pack.nodes() está codificado para utilizar la clave value de la entrada de children (en este caso todos los paquetes) para el tamaño de los nodos (añada r) y determinar la posición (añadir x y y).

En esencia,

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

Esto me hizo tropezar en un primer momento, así, se puede ver que classes() no añade r, x y y desde classes(root) no tiene esos atributos. La respuesta de Krasnaya tocó la mayor parte de esto, pero sentí que necesitaba un poco más de explicación (al menos lo hizo para mí).