D3.js. Is it possible to animate between a force-oriented graph and a node-link tree?

Question

I use the D3.js and watch the demographic diagram with power mode:

http://mbostock.github.com/d3/ex/force.html

I also look at the node-link tree:

http://mbostock.github.com/d3/ex/tree.html

What I would like to do:

- Start with a force-oriented graph, and when the user clicks on a node, it smoothly animates into a tree, with the selected node in the center. - Then, when the user clicks on any empty space on the canvas, it should plunge back into the force-oriented graph.

Has anyone done anything like this before or had any recommendations for a better approach? I am new to D3.js and have no idea if this is supported by the framework.

Answer 1

What you need to do is stop the force and apply the transformation of existing nodes to xy obtained from another layout. So your function will look like this:

 force.stop(); d3.selectAll("g.nodes").transtion().duration(500) .attr("translate","transform("+newLayoutX+","+newLayoutY+")" 

Then iterate over the array of nodes and set the values x , y , px , py to display the new x and y . This will allow your nodes to know the current x and y position for the force layout when force.start() run force.start()

You can see the plotLayout() function in this example:

https://gist.github.com/emeeks/4588962

However, this is independent of the second d3.layout. The problem you will encounter is that you need a hierarchical dataset for the tree layout, which requires you to convert the node and edge data into an array node.children, as expected in hierarchical layouts. The way I will do this is to duplicate the dataset and manually smooth it, but there may be a more elegant solution that I don't know about.