2014-01-14 133 views
1

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

回答

6

如果您的數據是一個樹狀結構,你可以使用一個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/2d.y = d.y + d.dy/2(例如,在你的enter()使用.each()呼叫中心的他們鏈)。當然,使用d.value初始化您的節點大小(以適當的比例)。