javascript - d3 桑基图中的排序节点

Question

我正在尝试对 D3 sankey 中的节点进行排序。我希望将具有较大值的节点绘制得更高。

这是相关代码 ( based on d3 noob's code ) 片段，我在其中尝试通过使用 D3 的内置排序功能来实现我想要的。结果不是我所期望的。

在检查 sankey.js 后，我并不完全清楚插件如何对节点进行排序。任何有关该主题的建议将不胜感激。

//set up graph in same style as original example but empty
    graph = {"nodes" : [], "links" : []};

    data.forEach(function (d) {
        graph.nodes.push({ "name": d.source });
        graph.nodes.push({ "name": d.target });
        graph.links.push({ "source": d.source,
            "target": d.target,
            "value": +d.value });
    });

//try to sort the nodes and links before indexing them (not working)
    graph.nodes.sort(function (a,b) {return d3.descending(a.value, b.value); });
    graph.links.sort(function (a,b) {return d3.descending(a.value, b.value); });

    // return only the distinct / unique nodes
    graph.nodes = d3.keys(d3.nest()
        .key(function (d) { return d.name; })
        .map(graph.nodes));

    // loop through each link replacing the text with its index from node
    graph.links.forEach(function (d, i) {
        graph.links[i].source = graph.nodes.indexOf(graph.links[i].source);
        graph.links[i].target = graph.nodes.indexOf(graph.links[i].target);
    });

    //now loop through each nodes to make nodes an array of objects
    // rather than an array of strings
    graph.nodes.forEach(function (d, i) {
        graph.nodes[i] = { "name": d };
    });

Answer 1

从 sankey.js 文件的 resolveCollisions() 函数中删除以下行将停止更改节点的顺序:

function resolveCollisions() {
    ...
    // nodes.sort(ascendingDepth);  // commented this out to prevent node reordering
    ...
}

然后节点将按照它们最初填充的方式垂直排序。因此，如果您在推送数据之前先对节点进行排序，它们将按排序顺序出现。