Ví dụ bong bóng D3: Bubble.nodes() làm gì?

Question

Ví dụ: http://mbostock.github.com/d3/ex/bubble.html

Tôi đang gặp một thời gian khó khăn để hiểu những gì diễn ra trên với dòng 16:

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

Và tại sao, hoặc nơi trong lớp học() chức năng, biến classes [] nhận giá trị x, y, r được định nghĩa cho từng đối tượng của nó. Ngoài ra, bubble.nodes() dường như không phải là một chức năng thực tế?

Nếu tôi thêm một

console.log(classes) 

giữa các dòng 44 và 45 - mỗi đối tượng bên trong dường như trở nên thông dụng với x, y, r rồi - nhưng nó không phải là rõ ràng lý do tại sao điều này xảy ra.

Answer 1

Hàm lớp() không thêm thuộc tính .. nó chỉ làm phẳng cây. Các thuộc tính được thêm vào bên trong bubble.nodes() (đó là d3.layout.pack(). Node())

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

Answer 2

các cuộc gọi đến bubble.nodes() nắm để một cuộc gọi đến d3.layout.pack().nodes() từ bubble=d3.layout.pack(). Bí quyết là pack.nodes() được mã hóa cứng để sử dụng phím value của đầu vào children (trong trường hợp này là tất cả các gói) để kích thước các nút (thêm r) và xác định vị trí (thêm x và y).

Về bản chất,

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

này vấp tôi dậy lúc đầu là tốt, bạn có thể thấy rằng classes() không thêm r, x, và y từ classes(root) không có những thuộc tính. Câu trả lời của krasnaya đã chạm vào hầu hết những điều này nhưng tôi cảm thấy rằng nó cần giải thích thêm một chút (ít nhất là nó đã làm cho tôi).