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

Question

我想用D3想象一个简单的组织结构图.我做了一个小测试,当我调用"树"方法时,分层数据不起作用.当我调试时,看起来分层没有用它所需的条目填充"root"(我运行并调试了其他示例,例如这个,我可以看到,stratify填充了一组不存在的子/父条目在我的).

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"需要放在链的末尾.