Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I create a tree layout using JSON data in d3.v4 - without stratify()

Tags:

json

tree

d3.js

I'm trying to update some d3 code from v3 to version 4. I have a tree diagram using JSON data. The d3.v4 examples show how to convert tabular data (e.g. flare.csv) to hierarchical data using stratify() https://bl.ocks.org/mbostock/9d0899acb5d3b8d839d9d613a9e1fe04. But my data is JSON so I don't want or need stratify(). I get this error:

undefined is not a function (evaluating 'root.eachBefore')

running this code:

var height = 200;
var width = 500;

var xNudge = 50;
var yNudge = 20;

var tree = d3.tree()
    .size([height, width]);

var svg = d3.select("body").append("svg").attr("width","100%").attr("height","100%");
var chartGroup = svg.append("g").attr("transform","translate(50,200) rotate(-90)");

d3.json("treeData.json", function(treeData) {


    var root = treeData[0];
    tree(root);
    console.log('hello');//doesn't log to console, i.e. error occurs beforehand
}

treeData.json:

[
  {
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level"
    }
  ]
}
]

Is it actually possible to create a tree layout in d3.v4 without using stratify, i.e. using data that is already hierarchical? Does anyone know of an example, or can spot the problem in my code? thanks

like image 886
emma Avatar asked Jul 18 '16 15:07

emma


2 Answers

I had the same problem. Emma's response essentially answered it, but I still had trouble getting it to work properly. I'll elaborate a bit in case anyone may find it helpful. I created a block showing the functional result here, which is based on your example data above, Emma's response, and this block.

The answer is three parts:

  • You have your JSON object wrapped in Array brackets. Either remove those brackets (as I did in the gist), or put a [0] on the end of your treeData (as Emma did in the link above) to get the Object out of that 1 element Array.
  • Pass your JSON object to d3.hierarchy (as Emma explained).
  • Lastly, the API appears to have changed for naming the nodes, which is also taken care of in my block linked above.

For convenience, here's the code from the block I made:

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    g = svg.append("g").attr("transform", "translate(60,0)");

var tree = d3.cluster()
    .size([height, width - 160]);

var stratify = d3.stratify()
    .parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });

d3.json("treeData.json", function(error, treeData) {
  if (error) throw error;

  var root = d3.hierarchy(treeData);
  tree(root);

  var link = g.selectAll(".link")
      .data(root.descendants().slice(1))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", function(d) {
        return "M" + d.y + "," + d.x
            + "C" + (d.parent.y + 100) + "," + d.x
            + " " + (d.parent.y + 100) + "," + d.parent.x
            + " " + d.parent.y + "," + d.parent.x;
      });

  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(" + d.y + "," + d.x + ")"; 
      })

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

  node.append("text")
      .attr("dy", 3)
      .attr("x", function(d) { return d.children ? -8 : 8; })
      .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { 
        return d.data.name;
      });
});

and here's treeData.json removed from the Array:

{
  "name": "Top Level",
  "parent": "null",
  "children": [
    {
      "name": "Level 2: A",
      "parent": "Top Level",
      "children": [
        {
          "name": "Son of A",
          "parent": "Level 2: A"
        },
        {
          "name": "Daughter of A",
          "parent": "Level 2: A"
        }
      ]
    },
    {
      "name": "Level 2: B",
      "parent": "Top Level"
    }
  ]
}
like image 75
mgig Avatar answered Nov 12 '22 07:11

mgig


You need to run d3.hierarchy on your data to get it ready for tree(). Stratify presumably runs hierarchy or is similar in some way. So change the appropriate line to: var root = d3.hierarchy(treeData[0]);

like image 24
emma Avatar answered Nov 12 '22 08:11

emma