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

Question

I am using the D3.js library and looking at the force-directed graph demo:

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

Answer 1

What you need to do is stop the force and apply a transformation of the existing nodes to the x-y derived from the other layout. So your function would look like this:

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

Then iterate through your nodes array and set the x, y, px, py values to reflect the new X and Y. This will set your nodes to know the current x and y position for the force layout when you run force.start()

You can take a look at the plotLayout() function in this example:

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

This does not rely on a second d3.layout, though. The problem you'll run into is that you need a hierarchical dataset for the tree layout, which requires you to transform your nodes and edges data into an array of node.children as expected in the hierarchical layouts. The way that I would do it is to duplicate the dataset and manually flatten it, but there may be a more elegant solution that I'm unaware of.