Question

我是D3.js的新手。我正在尝试从树布局中删除节点，但我找不到这样做的方法。这是一个示例树布局 https://dl.dropbox.com/u/7098/tree/dynamic3.html

我想动态删除：
https://dl.dropbox.com/u/7098/tree/aaa.gif

我相信我应该对root json对象进行一些操作...
如果你们有意，请告诉我。

Answer 1

这明确了seb的答案。你设置你的点击处理程序，把它放在：

.on("click", function(d) { 
    if (d.parent && d.parent.children){
        console.log('removing ' + d.name);
        var nodeToDelete = _.where(d.parent.children, {name: d.name});
        if (nodeToDelete){
            d.parent.children = _.without(d.parent.children, nodeToDelete[0]);
        }
    }
});

应该能得到你想要的东西。确保调用从源数据中提取树的任何方法，该数据现在已被修改。注意：我使用下划线库来使用_.where和_.without，尽管您可以使用纯js或其他库来执行此操作。例如，为方便起见，一些检查是为了防止删除根节点。

P.S。因为您可能希望保持扩展/折叠行为，所以只需在click回调中添加一个条件来检查修改键以指定节点删除，例如d3.event.altKey。

Answer 2

Collapse/expand child nodes of tree in d3.js?回答了您需要遵循的原则。该示例显示了如何折叠节点的单击处理程序上的树。

如果修改了传递给布局管理器的数据结构，则树将相应更新。如果在上面的示例中折叠树状布局，则会删除节点的children属性：children的值隐藏在变量_children中，以便孩子们可以再次切换回来。有关详细信息，请参阅toggle功能。

要删除节点，请遵循相同的逻辑，但从其父级children列表中删除接收click事件的节点。要查找父级，您可以在单击处理程序中遍历树，也可以在数据结构中存储对每个父级的引用。

如何删除树布局D3.js上的节点？

2 个答案: