D3 SVG transition issue after deleting few nodes

Question

I am facing a weird issue in this jsfiddle . If I delete few existing nodes and add new nodes later, the transition of nodes doesn't stay the same.

This scenario is working fine :

1. run the jsfiddle.
2. click the reset button
3. select ctee node which is connected to a few other nodes and drag.
4. all the connected nodes should follow the main dragged node.
5. check out the following screenshot, the connected nodes to the ctee node are also moving along with ctee .

This scenario is having a problem (only difference is we are going to delete a node first and then click reset button) :

1. run the jsfiddle.
2. right click the GW node and select the option Stop .
3. this will remove the node from the screen.
4. now click the reset button
5. select ctee node which is connected to a few other nodes and drag.
6. Ideally, all the connected nodes should follow the main dragged node but it doesn't work. the connected nodes stay at their original position.

   7. check out the following screenshot, the connected nodes to the ctee node are not moving along with ctee .

Answer 1

The issue looks like that when you delete a node, you're creating a new reference to links that is not in sync with your force layout:

links = links.filter...

To fix this, you can simply add: force.links(links); to the line after it to update the force layout's reference.

Updated fiddle: https://jsfiddle.net/r1tcj0mf/16/