如何使用代码删除 D3 树节点？答案

【问题标题】：How do I delete a D3 tree node using code?如何使用代码删除 D3 树节点？
【发布时间】：2014-02-18 12:22:34
【问题描述】：

我有这个小提琴http://jsfiddle.net/Deansmithok/3HeU9/

我想删除一个节点（以及它的链接）

在我的最后一次尝试中：

我已将 DOM 中的 d.id 保存为 $('#inpSelidTAUsers').val() 然后尝试了这段代码...

svgGroup.selectAll('path.link').filter(function(d, i)
  {
  if (d.target.id == $('#inpSelidTAUsers').val() ) 
    return true; else return false;
  }).remove();

svgGroup.selectAll('g.node').data(nodes).filter(function(d, i)
  { 
  if (d.id == $('#inpSelidTAUsers').val()) 
    return true; else return false; 
  }).remove();

此代码确实删除了屏幕上的节点和链接。但是，如果我调用 DrawItAll(root)，那么节点会重新出现。请告诉我如何删除节点以便它保持 GONE :)

【问题讨论】：

嗯，您要从 d3 选择中删除节点和链接，但不会从数据中删除。所以，一旦你再次渲染数据，它就会显示出来。还是我错过了什么？
当然我指的是代表节点和链接的数据。您需要从数据集中删除它。
嗨。你是对的 - 我没有更新数据集......只是我不知道该怎么做。我看不到如何访问数据集。

标签： javascript jquery node.js d3.js

【解决方案1】：

您的选择返回元素 g.node，尽管您将其从视图中删除，但您似乎重新绑定了它，没有挂起。由于您没有更改基础数据，因此当您重新绑定它时，您将获得与第一次相同的内容。

如果您希望节点消失，您需要更改数据集。您的数据在此对象中：

treeData = {
  'name': 'Me','POS':'CEO','children':
    [
    {'name': 'Mr X','POS':'Sales Manager'},
    {'name': 'Mr Y','POS':'Architect'},
    {'name': 'Mr Z','POS':'Finance Assistant','children':[{'name': 'Mr U','POS':'Window Cleaner'}]},
    ]
  };

能够从 treeData 中删除子节点的最简洁方法可能是向对象添加这样的函数：

treeData.removeChild = function(idxToRemove) {
  var i, len, results;
  results = [];
  for (i = 0, len = this.children.length; i < len; i++) {
    if (i !== idxToRemove) {
      results.push(treeData.children[i]);
    }
  }
  this.children = results;
};

然后您只需调用要删除的元素的索引：

treeData.removeChild(2)  // removes the last child

然后重新绑定数据并更新视图。

【讨论】：

嗨。这行得通。我必须使用的是“treeData”或“root”。谢谢