CODEWITHSUNDEEP
javascriptd3.js
Trekkx
Trekkx

Reputation: 113

Having trouble building a tree using d3.tree() in d3v4

I'm pretty new to the d3 library and I've been trying to construct a tree using the tree() function.

I'm getting errors as soon as I try and create the tree:

var tree = d3.tree()
    .size([2 * Math.PI, 500])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var root = tree(buildTree(jsonObj));

is what seems to be giving me errors, shown from chrome's console: 

Uncaught TypeError: Cannot read property 'z' of undefined
at firstWalk (d3.v4.js:10665)
at TreeNode.node_eachAfter [as eachAfter] (d3.v4.js:9876)
at tree (d3.v4.js:10625)
at HTMLInputElement.<anonymous> (better_radial_tree.html:86)

All buildTree does is return the root node that has .children[], that have other children, and so on. Oddly enough I had no problems constructing one using d3.layout.tree, but that doesn't seem to work in d3.v4. The object(s) that I'm trying to construct the tree from follow this layout:

Node object with .name, .type, and .children[Node].

The structure in the Chrome console

Any ideas why this isn't working? Are there more properties other than children that I need to add to the objects? Any help would be greatly appreciated.

I'm using Mike Bostock's Radial Tidy Tree block (https://bl.ocks.org/mbostock/4063550) as a base for this. The rest of the code is as follows:

            var link = g.selectAll(".link")
            .data(root.links())
            .enter().append("path")
              .attr("class", "link")
              .attr("d", d3.linkRadial()
                  .angle(function(d) { return d.x; })
                  .radius(function(d) { return d.y; }));

        var node = g.selectAll(".node")
            .data(root.descendants())
            .enter().append("g")
              .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); })
              .attr("transform", function(d) { return "translate(" + radialPoint(d.x, d.y) + ")"; });

            node.append("circle")
              .attr("r", 2.5);

            node.append("text")
              .attr("dy", "0.31em")
              .attr("x", function(d) { return d.x < Math.PI === !d.children ? 6 : -6; })
              .attr("text-anchor", function(d) { return d.x < Math.PI === !d.children ? "start" : "end"; })
              .attr("transform", function(d) { return "rotate(" + (d.x < Math.PI ? d.x - Math.PI / 2 : d.x + Math.PI / 2) * 180 / Math.PI + ")"; })
              .text(function(d) { return "test"; });

        function radialPoint(x, y) {
            return [(y = +y) * Math.cos(x -= Math.PI / 2), y * Math.sin(x)];
        }

Upvotes: 2

Views: 549

Answers (1)

Trekkx
Trekkx

Reputation: 113

Had to compute a hierarchical layout before passing my data into tree.

var root = tree(d3.hierarchy(buildTree(jsonObj)));

Thanks to Mark (https://stackoverflow.com/users/16363/mark)

Upvotes: 2

Related Questions