javascript - 我无法从 D3 力图中正确删除节点

Question

我正在开发一个基本的 javascript D3 图形类，我可以用它来快速启动项目。目前添加链接和节点工作正常，但我显然不理解一些基本概念。

这是我目前正在执行的删除节点的操作。

this.nodesRef = this.svg.select(".nodes").selectAll(".node");
//...
removeNode (iNodeId) 
{
  let indexToRemove = this.nodesData.map(node => node.id).indexOf(iNodeId);
  this.nodesData.splice(indexToRemove,1);   

  this.nodesRef.data(this.nodesData,d => d.id).exit().remove(); 
};

我处理 nodesRef 选择和 nodesData 数组的方式显然有问题。当发生 removeNode() 时，它看起来 没问题，但是选择仍然包含删除的节点，而当我稍后添加另一个节点时，添加的节点没有出现，a节点卡住了，还有一些其他问题..

我需要弄清楚如何在删除后正确更新选择和数据，但老实说我迷失在进入/退出/更新行话中。

更新:

我添加了 removeNode() 函数中缺少的 updateSimulation()，但仍然存在删除后第 6 个节点无响应的问题本身，但它由第 5 个节点控制。

removeNode (iNodeId) 
{    
  // Remove from data
  let indexToRemove = this.nodesData.map(node => node.id).indexOf(iNodeId);
  this.nodesData.splice(indexToRemove,1);   

  this.nodesRef.data(this.nodesData,d => d.id).exit().remove();  

  this.updateSimulation();  
};  

updateSimulation ()
{
  this.simulation.nodes(this.nodesData);
  this.simulation.force("link").links(this.linksData);
  this.simulation.alphaDecay(0.05).alpha(1).restart();
}  

我觉得奇怪的是，在 exit().remove() 之后，删除的节点保留在选择中。我试图通过做类似的事情来更新 nodesRef

this.nodesRef = this.nodesRef.data(this.nodesData,d => d.id)
  .enter()
  ./* defining nodes stuff*/ 
  .merge(this.nodesRef);

但它给我带来了相同的结果。我仍然认为我没有正确理解如何管理选择。

编辑:删除了古老的 CodePen 链接

Answer 1

我终于让它工作了!

This page对理解选择很有帮助。基本上我一开始不明白 append() 会返回一个新的选择，而不仅仅是向包含先前选择的变量添加内容。

This page揭示了作者更新图表的方式。使用这种模式使很多事情变得更简单。总体思路是对节点和链接数据数组进行拼接、弹出、推送、操作，然后以这种方式更新选择:

// Update the data, remove obsolete elements, add and merge new elements
nodesSelection = nodesSelection.data(nodesData, d => d.id);
nodesSelection.exit().remove();
nodesSelection = nodesSelection.enter()./* setup node shape*/.merge(nodesSelection);

// Repeat pattern for links
// ...

// Update simulation resources and "reheat" the graph
simulation.nodes(nodesData);
simulation.force("link",d3.forceLink(linksData).id( d => d.id));
simulation.alpha(1).restart();

还有一些事情我需要通过链接更新来弄清楚，Mike 的示例只是通过执行 simulation.force("link").links(links); 来更新模拟链接，但那是到目前为止不适合我。可能与链接对象属性有关。

但这已经足够好了，是时候玩了:current Graph class here