javascript - 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 .