删除少数节点后D3 SVG转换问题 [英] D3 SVG transition issue after deleting few nodes

问题描述

我在

此方案出现问题（唯一不同的是我们将首先删除节点，然后点击重置按钮）：

1. 运行jsfiddle。


2. 右键单击 GW 节点，然后选择 Stop 选项。


3. 这将从屏幕上删除节点。


4. 现在点击重置按钮


5. 选择 ctee 节点，该节点连接到其他几个节点并拖动。


6. 理想情况下，所有连接的节点都应遵循主节点拖动节点但它不起作用。连接的节点保持原始位置。
   
   

   
   

   
   
   7. 查看以下屏幕截图，连接到 ctee的节点节点不与 ctee 一起移动。
   
   

   
   

解决方案

当您删除节点时，您正在创建对链接的新引用这与你的部队布局不同步：

  links = links.filter ... 
  

要解决此问题，您只需添加： force.links（links）; 在更新强制布局参考之后的行。

更新小提琴： https://jsfiddle.net/r1tcj0mf/16/

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.

解决方案

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/

这篇关于删除少数节点后D3 SVG转换问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！