Interactive Tree in D3

In the previous articles we have learnt many things about the tree diagrams of d3. In this article we are going to discuss another feature called interactive diagram. As the first thing to do we have to know what is interactive diagram?

Interactive diagram:

As per wikipedia we can say that the interaction diagrams, a subset of behavior diagrams, emphasize the flow of control and data among the things in the system being modeled. For example, the sequence diagram which shows how objects communicate with each other in terms of a sequence of messages.
So, in simple terms interactive diagram gives usa chance to modify the tree design or making a runtime collapsible tree design by clicking the parent node.

The following tree diagram example includes an interactive element where the user can click on any parent node and it will collapse on itself to make more room for others or to simplify a view. Additionally, any collapsed parent node can be clicked on and it will re-grow to its previous condition.

Let us first visualize the feature and then we shall discuss the codes.

Before collapsing:

before_collapse

After collapsing:

after collapse

As you can see by clicking the parent node the tree collapsed. And by recliking that same node will cause it to re-grow. You can try out that. Ofcourse there should be a question in your mind about using it. Although we can not see any urgent need to use this feature in the above example, but in case of many trees where there is a lot of entity than this example we will feel the need to do so. Because in case of those trees without this feature they would look bulky and confusing. You can have tilford tree as an reference. Then it will be easy for you to understand.

Now let us talk about the codes. And how to achive this feature.

One of the important changes to start with is to make each node responsive to the mouse pointer. This is done by including the following in the <style> section.

 .node {
  cursor: pointer;
 }

The code then adds sections to allow the diagram to follow the d3.js model of enter – update – exit for the nodes with a suitable transition in between.

Nodes are coloured (“red”) if they have been collapsed and at the end of the script we have a function that makes use of the d._children reference we have been using in most of our examples.

function click(d) {
  if (d.children) {
 d._children = d.children;
 d.children = null;
  } else {
 d.children = d._children;
 d._children = null;
  }
  update(d);
}

This allows the action of clicking on the nodes to update the data associated with the node and as a consequence change it’s properties in the script based on if statements. Such as .style(“fill”, function(d) { return d._children ? “red” : “#fff”; }); } which will fill the node with “red” if d._children exists, otherwise make it white. So if we want to change the coor white and fill with some other color. Then we just have to change the hex color code(#fff) into the color you want to fill with.

The example with interactive tree should provide you with the capability to generate some interesting visualizations.

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 *