CODEWITHSUNDEEP
javascriptd3.js
nyi
nyi

Reputation: 3229

D3 SVG transition issue after deleting few nodes

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.

connected nodes moving with the main node

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.
    1. check out the following screenshot, the connected nodes to the ctee node are not moving along with ctee.

Connected nodes not moving when the node is dragged

Upvotes: 4

Views: 248

Answers (1)

Steve
Steve

Reputation: 10886

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/

Upvotes: 2

Related Questions