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 reconstruc

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.