Esempio di bolla D3: cosa fa bubble.nodes()?

Question

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

Sto avendo difficoltà a capire ciò che accade con la linea 16:

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

E perché, o dove all'interno delle classi() la funzione, la variabile classes [] ottiene i valori x, y, r definiti per ciascuno dei suoi oggetti. Inoltre, bubble.nodes() non sembra essere una funzione effettiva?

Se aggiungo un

console.log(classes) 

tra le linee 44 e 45 - ogni oggetto all'interno sembra essere popolato con x, y, r già - ma non è chiaro perché questo accade.

Answer 1

La funzione classes() non aggiunge gli attributi .. semplicemente appiattisce l'albero. Gli attributi sono aggiunti all'interno bubble.nodes() (che è d3.layout.pack(). Nodi())

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

Answer 2

La chiamata a bubble.nodes() riduce a una chiamata a d3.layout.pack().nodes() dal bubble=d3.layout.pack(). Il trucco è che pack.nodes() è hardcoded per utilizzare la chiave value dell'input children (in questo caso tutti i pacchetti) per dimensionare i nodi (aggiungere r) e determinare la posizione (aggiungere x e).

In sostanza,

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

Questo mi sgambetto in un primo momento così, si può vedere che classes() non aggiunge r, x, e dal momento che yclasses(root) non ha questi attributi. la risposta di Krasnaya ha toccato gran parte di questo, ma ho sentito che aveva bisogno di spiegazioni un po 'più (almeno lo faceva per me).