javascript - 当某些节点被删除时更新 D3 树

Question

我有一棵树，如example 。当我删除一些节点时，应该更新树。但我不想完全清理 svg 并重绘树。要删除的代码:

function click(d) {
  d.children = d.children[0].children[0].children;
  update(); // there is call inside to link.exit().remove(); and node.exit().remove();
}

问题是树被破坏了(删除 C 和 D 后):

这里是代码 - JSfiddle link

在不完全重画的情况下正确绘制树的最佳方法是什么？

我尝试更新深度，但没有帮助

function click(d) {
  d.children = d.children[0].children[0].children;
  d.children[d].depth =  d.children[d].depth -2;
  update(); // there is call inside to link.exit().remove(); and node.exit().remove();
}

Answer 1

您需要添加圈子和链接的更新功能。

由于您只进行了添加和删除操作，因此可以正确添加和删除元素，但是当需要更新元素时​​，却没有执行任何操作。通过添加圈子和链接的更新功能，当发生任何变化时，它们将被“更新”到新位置。

// ** UPDATE CIRCLES ***
node.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

// *** UPDATE LINK ***
link.attr("d", diagonal);

这是更正后的 fiddle :http://jsfiddle.net/t0mhsauf/15/

希望这有帮助。