d3.js：父母的SIZE =兒童

Question

我建立神似this東西的大小的總和。我所喜歡的是讓每個節點的大小與json文件中定義的大小相同，或者，如果它沒有大小屬性​​，而是json中的子級屬性（它是所有子級大小的總和），則爲OR。怎麼會這樣做呢？我已經嘗試了各種方法，但缺乏添加和硬編碼它在JSON中，這是有點跛腳，我還沒有發現任何真的會工作;（任何建議，蜂巢的心態？

Answer 1

如果您的數據是一個樹狀結構，你可以使用一個Partition Layout初始化節點的位置和大小。通過分區父節點返回的d.value是默認值的所有子節點的總和，假設你已經正確設置value accessor function返回數據變量你想用於葉節點的大小

儘管partition examples中的標準顯示是用空間填充的矩形或弧來代替節點和鏈接，但它仍然具有所有基本功能其他層次佈局的類型。因此，一旦您在根上運行佈局來生成節點數組，您可以運行links function來計算鏈接。

如果仍要基於力的佈局，而不是一個靜態的樹，你可以在你的節點和鏈路傳遞給力佈局並啓動它。

總之：

var root = /*root object read from JSON data*/; 

var w,h; /*set appropriately */ 

var partition = d3.layout.partition() 
      .size([w,h]) 
      .value(function(d){return d.size;}) 
      .children(function(d){return d.children;}) 
        //optional: this is the default, change as needed 
      .sort(null); 
       //optional: turns off sorting, 
       //the default is to sort children by descending size 

var nodes = partition(root); 

var links = partition.links(nodes); 

initialize(); 

var force = d3.layout.force() 
      .nodes(nodes) 
      .links(links) 
      .size([w,h]) 
      /*and any other customization*/ 
      .start(); 

svg.on("tick", update); 

有一點要注意。由分區佈局創建的x值設計爲矩形的角點而不是圓的中心。因此，如果您根據原始值定位您的節點，則最終會將父母帶到子女的最左側。如果你正在運行後通過基於力的佈局的一切，它最終將自行解決，但你可以從一開始就在初始化過程中設置所有的節點上d.x = d.x + d.dx/2和d.y = d.y + d.dy/2（例如，在你的enter()使用.each()呼叫中心的他們鏈）。當然，使用d.value初始化您的節點大小（以適當的比例）。