d3 V4 d3.stratify는 트리와 어떻게 작동합니까?

Question

D3으로 간단한 조직도를 시각화하려고합니다. 작은 테스트를했고 계층화 된 데이터가 "트리"메소드를 호출 할 때 작동하지 않습니다. 디버깅 할 때, stratify가 필요한 항목을 "루트"로 채우지 않은 것 같습니다 (this과 같은 다른 예제를 실행하고 디버깅 한 결과, 계층화는 존재하지 않는 자식/부모 항목 집합을 채 웁니다. 광산에서).

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는"체인의 마지막에 넣어해야합니다.