Creating Vertical Tree with D3

In the previous article i have showed you a simple example of a tree structure. In this article we will understand the codes and tweak a little bit here and there to see some difference.

Then let us begin with the previous code. As we have seen in the previous code it was a horizontal tree with a little design. At first we will talk about the data.

In this example we have used hard coded js to use the data. You can use a json file or dynamic data if you wish. We will go through with those letter.
Let us look for the data structure for the time being.

var treeData = [
  {
    "name": "Parent 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": "Level 2: B",
        "children":[{
          "name": "Son of B",
            "parent": "Level 2: B"
        },
        {
          "name": "Son of B",
            "parent": "Level 2: B"
        },
        {
          "name": "Son of B",
            "parent": "Level 2: B"
        },
        ]
      }
    ]
  }
];

As you can see in the above set of codes we have specified the parent and children relation with every entity. Only the 1st parent will have a null value in parent section.
Now let us see how we can set the links?

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

Above set of codes are used to show us the links. We all know that the previous tree was a horizontal tree. More like a data tree structure. To make it a pedigree structure or a vertical tree we have to change 3 things in the example. As of the 1st thing we have to change the above set of codes into

var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.x, d.y]; });

can you tell the difference? You caught it right. The difference is in the position of x & y.

The 2nd thing we have to change is responsible for appending nodes.and that means we have to change

var nodeEnter = node.enter().append("g")
   .attr("class", "node")
   .attr("transform", function(d) { 
    return "translate(" + d.y + "," + d.x + ")"; });

into

var nodeEnter = node.enter().append("g")
   .attr("class", "node")
   .attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; });

yes you are right we are again changing the position of x & y. Truth to be told ,we are not changing the entire structure for converting it in vertical. We are just rotating the tree. To achive this we just need to tweak the dimention points a little bit. So after this we get what we see below.

temp_ver_tree

Now it looks fine. But you sure have noticed that the texts are in left or right of the nodes. In bigger tree it could be problematic. So what to do? This time we are going to make changes in text appending block.

As previously we are going to change it from horizontally to vertically. So we have to change dimention point to y. Next we have to change the position of the text to middle. And lastly to look better we have to increase the differennce. In this case ihave increased 5 px. It is all in your hands. So, the new set of code just looks like

 nodeEnter.append("text")
   .attr("y", function(d) { 
    return d.children || d._children ? -18 : 18; })
   .attr("dy", ".35em")
   .attr("text-anchor", "middle")
   .text(function(d) { return d.name; })
   .style("fill-opacity", 1);

ver_tree

Now we have a perfectly vertical tree.

Except this we still have a lots of topic to discuss and change their appreances.

If you find this article helpful, you can connect us in Google+ and Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *