【问题标题】:How to remove node on tree layout D3.js?如何删除树布局 D3.js 上的节点?
【发布时间】:2012-11-29 22:52:13
【问题描述】:

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

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

我相信我应该对根 json 对象进行一些操作...
如果你们有想法,请告诉我。

【问题讨论】:

    标签: d3.js


    【解决方案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 或其他库来执行此操作。例如,一些检查是为了方便和防止删除根节点。

    附言因为您可能希望保留展开/折叠行为,所以只需在点击回调中放置一个条件来检查用于指定节点删除的修饰键,例如 d3.event.altKey。

    【讨论】:

      【解决方案2】:

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

      如果您修改已传递给布局管理器的数据结构,则树将相应更新。在上面示例中折叠树布局的情况下,删除节点的 children 属性:children 的值隐藏在变量 _children 中,因此可以再次切换子节点。详见toggle函数。

      要删除一个节点,然后遵循相同的逻辑,但从它的父级children 列表中删除接收到点击事件的节点。要查找父级,您可以在点击处理程序中遍历树,或者在数据结构中存储对每个父级的引用。

      【讨论】:

      • 非常感谢您的回复。但是崩溃系统
      • 我不明白。我误解了你的问题吗?
      • 很抱歉留下未完成的评论。我想删除一个节点,而不是崩溃。我想知道如何删除节点。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2017-12-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-11-05
      • 1970-01-01
      相关资源
      最近更新 更多