D3樹圖節點順序

Question

我是D3的新手，我構建了我的第一個樹狀圖。

我想弄清楚從左到右，從上到下排列節點而不是從右到左+從上到下。該順序基於每個節點的大小值。

現在，它看起來像

size 20 | size 100 
size 50 | 
size 70 | size 200 

，但我要像

size 200 | size 70 
      | size 50 
size 100 | size 20 

這裏是全JSfiddle。

我真的很感激它。

Answer 1

您可以使用樹圖佈局的.sort function來實現此目的。默認的排序是這樣的：

.sort(function(a,b) { 
    return b.value - a.value; 
}) 

爲了得到正是你需要你想要什麼調整大小以及將其更改爲反向

.sort(function(a,b) { 
    return a.value - b.value; 
}) 

改變整體佈局一樣，所以。

var treemap = d3.layout.treemap() 
.size([width/1.5, height]) 
.sticky(true) 
.sort(function(a,b) { 
    return a.value - b.value; 
}) 
.value(function(d) { return d.size; }); 

完整示例here。