d3 V4 d3.stratify 如何与树一起工作？

Question

我正在尝试使用 D3 可视化一个简单的组织结构图。我做了一个小测试，当我调用“树”方法时，分层数据不起作用。当我调试时，似乎分层没有用它需要的条目填充“根”（我运行并调试了其他示例，例如this，我可以看到分层填充了一组子/父条目，这些条目不是' t 出现在我的身上）。

test.json:

{"orgchart":[
{"EmployeeName":"TO","Manager":"","Team":"My Company","JobRole":"Something Cool"},
{"EmployeeName":"JW","Manager":"TO","Team":"My Company","JobRole":"Something Cool"},
{"EmployeeName":"BK","Manager":"JW","Team":"Team 1","JobRole":"Something Cool"},
{"EmployeeName":"WH","Manager":"BK","JobRole":"Something Cool"},
{"EmployeeName":"SE","Manager":"BK","JobRole":"Something Cool"},
{"EmployeeName":"QI","Manager":"BK","JobRole":"Something Cool"},
{"EmployeeName":"KX","Manager":"BK","JobRole":"Something Cool"},
{"EmployeeName":"KA","Manager":"KX","JobRole":"Something Cool"},
{"EmployeeName":"HH","Manager":"JW","Team":"Team 2","JobRole":"Something Cool"},
{"EmployeeName":"DN","Manager":"HH","JobRole":"Something Cool"},
{"EmployeeName":"KT","Manager":"HH","JobRole":"Something Cool"},
{"EmployeeName":"JB","Manager":"KT","JobRole":"Something Cool"},
{"EmployeeName":"UM","Manager":"KT","JobRole":"Something Cool"},
{"EmployeeName":"AL","Manager":"KT","JobRole":"Something Cool"},
{"EmployeeName":"FR","Manager":"KT","JobRole":"Something Cool"},
{"EmployeeName":"WE","Manager":"HH","JobRole":"Something Cool"},
{"EmployeeName":"CO","Manager":"WE","JobRole":"Something Cool"},
{"EmployeeName":"LE","Manager":"WE","JobRole":"Something Cool"},
{"EmployeeName":"LO","Manager":"WE","JobRole":"Something Cool"},
{"EmployeeName":"YI","Manager":"HH","JobRole":"Something Cool"},
{"EmployeeName":"EI","Manager":"YI","JobRole":"Something Cool"},
{"EmployeeName":"DJ","Manager":"YI","JobRole":"Something Cool"},
{"EmployeeName":"SH","Manager":"YI","JobRole":"Something Cool"},
{"EmployeeName":"BS","Manager":"JW","Team":"Team 2","JobRole":"Something Cool"},
{"EmployeeName":"SP","Manager":"BS","JobRole":"Something Cool"},
{"EmployeeName":"SB","Manager":"JW","Team":"Team 3","JobRole":"Something Cool"},
{"EmployeeName":"GQ","Manager":"SB","JobRole":"Something Cool"},
{"EmployeeName":"JS","Manager":"GQ","JobRole":"Something Cool"},
{"EmployeeName":"HT","Manager":"SB","JobRole":"Something Cool"},
{"EmployeeName":"MB","Manager":"HT","JobRole":"Something Cool"},
{"EmployeeName":"MF","Manager":"HT","JobRole":"Something Cool"},
{"EmployeeName":"FW","Manager":"SB","JobRole":"Something Cool"},
{"EmployeeName":"GM","Manager":"FW","JobRole":"Something Cool"},
{"EmployeeName":"XT","Manager":"FW","JobRole":"Something Cool"},
{"EmployeeName":"VQ","Manager":"FW","JobRole":"Something Cool"}]}

测试代码：

var tree = d3.tree().size([height, width - 160]);
d3.json("test.json", function(error, data) {
    if (error) throw error;
    // a breakpoint here shows data loaded and valid
    var root = d3.stratify(data.orgchart)
            .id(function(d) { return d.EmployeeName; })
            .parentId(function(d) { return d.Manager; });

    // a breakpoint here shows no children/parent entries in "root"
    // so the next function fails with 
    // "Uncaught TypeError: root.eachBefore is not a function"

    tree(root);
});

Answer 1

当然，在看了一天多之后，在发布我的问题 5 分钟后，我意识到了答案。

数据传入错误。

而不是这个：

var root = d3.stratify(data.orgchart)
        .id(function(d) { return d.EmployeeName; })
        .parentId(function(d) { return d.Manager; });

应该是这样的：

var root = d3.stratify()
        .id(function(d) { return d.EmployeeName; })
        .parentId(function(d) { return d.Manager; })
        (data.orgchart);

“data.orgchart”需要放在链的末尾。