Question

我有这个小提琴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），那么节点RE-APPEARS。请告诉我如何删除节点以使其保持GONE：）

Answer 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

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

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

1 个答案: