Transition from one forced-directed graph to another graph in d3js

Question

I have two Collapsible Force Trees for same nodes.

I haven't seen an example that we can transit from one tree to another with nodes transition and edges reconstruction in d3js.

Is there any way to do that?

Another relevant question, could we initialize the position of each node for forced-directed graph?

EDIT: Here is an example. I have two trees, the link is one, and I have another tree with same molecules but different tree structure. I am thinking it will be nice if I can animate between different trees for same molecules or entities.

Answer 1

In principle, these are the steps to follow.

• Stop the force layout to freeze the positions of the nodes.
• Disappear the links (e.g. fade out).
• Transition the nodes to their new positions. This can be done by setting the new positions on the old data or changing the data completely and then using the same code as in the tick handler for a force layout with a transition
• Re-add the links.
• If the new layout also uses a force layout, start that.

I've implemented an example of this here. I uses two sets of data and two force layouts. At first, only the nodes and links of the first force layout are displayed and the second only runs in the background. Then, the first is stopped and I follow the steps outlined above.

This isn't going to satisfy all requirements (e.g. with respect to how nodes should transition), but can be used as a starting point for such an implementation.