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

我有这个小提琴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

你的select返回元素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 

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