D3树形图节点顺序

use*_*436 1 javascript d3.js

我是D3的新手,我构建了我的第一个树形图.

我试图找出从左到右基于+从上到下而不是从右到左+从下到上排序节点.订单基于每个节点的大小值.

现在,它看起来像

size 20  |  size 100
size 50  |
size 70  |  size 200
Run Code Online (Sandbox Code Playgroud)

但我想要

size 200  | size 70
          | size 50
size 100  | size 20
Run Code Online (Sandbox Code Playgroud)

这是完整的JSfiddle.

我提前很感激.

Lar*_*off 5

您可以使用树形图布局的.sort功能来实现此目的.默认排序是这样的:

.sort(function(a,b) {
    return b.value - a.value;
})
Run Code Online (Sandbox Code Playgroud)

将此更改为相反

.sort(function(a,b) {
    return a.value - b.value;
})
Run Code Online (Sandbox Code Playgroud)

也改变了整体布局,所以为了得到你想要的,你也需要调整大小.

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; });
Run Code Online (Sandbox Code Playgroud)

在这里完成示例.