How does d3 V4 d3.stratify work with a tree?

Question

I am trying to visualize a simple org chart with D3. I made a small test and the stratified data isn't working when I call the "tree" method. When I debug, it looks like the stratify didn't populate "root" with the entries it needs (I ran and debugged other examples such as this and I can see that stratify populates a set of children/parent entries which aren't present in mine).

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"}]}

Test code:

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

Of course after looking at this for more than a day, 5 minutes after posting my question I realized the answer.

The data was being passed in wrongly.

Instead of this:

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

It should be this:

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

The "data.orgchart" needs to be put at the end of the chain.