D3 Bubble Przykład: Co robi bubble.nodes()?

Question

Przykład: http://mbostock.github.com/d3/ex/bubble.html

Mam twardy czas zrozumienia tego, co dzieje się z linii 16:

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

i dlaczego, lub jeżeli w ramach zajęć() funkcji, zmienna classes [] pobiera wartości x, y, r zdefiniowane dla każdego z jego obiektów. Ponadto, bubble.nodes() nie wydaje się być faktyczną funkcją?

jeśli dodać

console.log(classes) 

pomiędzy liniami 44 i 45 - każdy obiekt wewnątrz wydaje się być wypełnione X, Y, R już - ale to nie jest oczywiste, dlaczego tak się dzieje.

Answer 1

Funkcja classes() nie dodaje atrybutów .. po prostu spłaszcza drzewo. Atrybuty dodaje wewnątrz bubble.nodes() (co jest d3.layout.pack(), węzły())

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

Answer 2

Wywołanie bubble.nodes() sprowadza się do wywołania d3.layout.pack().nodes() od bubble=d3.layout.pack(). Sztuczka polega na tym, że pack.nodes() jest na stałe zakodowany, aby użyć klucza value wejściowego children (w tym przypadku wszystkich pakietów) do rozmiaru węzłów (dodać r) i określić pozycję (dodać x i y).

W istocie,

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

ten zadziałał mnie na pierwszym, jak również można zobaczyć, że classes() nie dodaje r, x i y od classes(root) nie posiada tych cech. odpowiedź krasnayi dotknęła większości tego, ale czułem, że potrzebuje trochę więcej wyjaśnień (przynajmniej dla mnie).