javascript - 删除 d3 图形节点留下剩余的线

Question

我正在编写一个基本的有向图编辑器并从 JSON 加载初始图。

我的问题是，删除节点经常会留下剩余的行(通常与我要删除的节点完全无关 - 您可以通过遍历并删除一堆节点来复制这一点)。其余工件也不随力布局移动。

我的理解是link.exit().remove();应该删除与我当前数据集不匹配的任何链接:

link = link.data(links,function(d){return d.source.Id + "_" + d.target.Id;});

我的示例的链接:

https://jsfiddle.net/slizice/9a8d6zsm/60/(点击一个节点并点击delete/backspace来删除)

直到我开始使用更大的数据集时我才观察到这一点。

任何想法将不胜感激!

编辑:

看起来可能是一些重复的链接造成的。一旦找到解决方案，我就会发布答案。

Answer 1

看起来我的生成链接的服务器端代码在某些情况下会多次遍历它们，从而生成重复项。

为了在客户端处理重复项，我只需先检查数组:

exists = false;
  edges.forEach(function(e) {
    if ((e.source.Id == sourceNode.Id) && (e.target.Id == targetNode.Id)) {
      exists = true;
    }
  });
  if (!exists) {
    edges.push({
      source: sourceNode,
      target: targetNode,
      value: e.Value
    });
  }