d3.js - d3 V4 d3.stratify 如何处理树？

Question

我正在尝试使用 D3 可视化一个简单的组织结构图。我做了一个小测试，当我调用“树”方法时，分层数据不起作用。当我调试时，看起来分层没有用它需要的条目填充“根”(我运行并调试了其他示例，例如 this，我可以看到分层填充了一组不存在的子/父条目在我的)。

测试.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”需要放在链的末端。