javascript - tree.sort到底是如何工作的？

Question

我有根节点和未排序的子节点。
我使用tree.nodes(treeData)来获取节点列表并构建一个分层列表，并且我希望对其进行排序。请参阅 jsfiddle 上的示例代码或以下:

/// define data
var treeData = {
    name: 'root',
    children: [
        { name: 1 },
        { name: 5 },
        { name: 2 },
        { name: 6 },
        { name: 4 },
        { name: 3, children: [ {name: 33 }, {name: 31 }, {name: 32 } ] },
        { name: 7 }
    ]
};

/// init tree
var tree = d3.layout.tree()
    .sort(function(a, b) { return d3.ascending(a.name, b.name); });
var nodes = tree.nodes(treeData); // nodes unsorted now
// uncomment this to get sorted nodes
// nodes = tree.nodes(treeData);

/// build hierarchy
var li = d3.select('ul').selectAll('li').data(nodes);
li.enter().append('li')
    .html(function(d) {
        return Array(d.depth).join('∣  ') + (d.depth ? '↳ ' : '') + "<b>"+d.name+"</b>" + " x: " + Math.round(d.x*100)/100 });

当定义 tree.sort() 时，treeData.children 数组已排序，但 tree.nodes(treeData) 返回未排序的数组节点数。

我还发现，如果我调用 tree.nodes() 两次，那么它会返回排序的节点:

nodes = tree.nodes(treeData) // returns unsorted: 1, 5, 2... but treeData.children is now sorted
nodes = tree.nodes(treeData) // returns sorted: 1, 2, 3...

看来 tree.sort() 会影响 treeData.children 数组以及 node.x 和 node.y 值但不影响 tree.nodes() 函数结果中的节点顺序。

所以问题是使用 tree.sort() 和 tree.nodes() 的正确方法是什么？

Answer 1

d3.layout.tree().sort()是 d3.layout.hiearchy() 的一部分.

版本3.5.6 (我看过的那个)，d3.layout.hierarchy函数从root构建广度优先的节点数组提供的树，按照 node.children 已定义的顺序.

树的每个节点都按此顺序插入到返回的节点数组中。

数组构建完成后，则root树按 d3_layout_hierarchyVisitAfter 排序，但这仅对树的 node.children 进行排序而不是节点数组。

节点数组本身从未排序。节点数组中节点的顺序基于root的顺序。树及其node.children命令。因此建议首先对其进行排序(或者为什么第二次调用 d3.layout.tree().sort() 有效 - 因为 child 现在已经排序)

查看D3 4.x documentation for sort它说的最后一句话是

You must call node.sort before invoking a hierarchical layout if you want the new sort order to affect the layout; see node.sum for an example.

因此，虽然 3 文档没有明确说明这一点，但看起来代码就是这样编写的。