Question

我想知道通过选择D并单击删除按钮来删除子A和B的最佳方法是什么：

d3.select("#deleteBtn").on("click", function() { d3.select(".selected").remove(); // how to delete children as well? });

除了使用遍历/递归功能外，是否有一种简单的d3方式导航到子数据？也许有人可以给我一个提示。

fiddle

Answer 1

您可以再次将所选节点的数据传递到包布局，以获取其子节点的所有节点的数组。然后使用键函数将该数组绑定到圆圈，以按名称匹配节点，并将其删除。只要每个节点都有唯一的名称，这将起作用。这是我的解决方案：

d3.select("#deleteBtn").on("click", function() {
    d3.select(".selected").each(function(data){
        var nodesToRemove = pack.nodes(data);
        vis.selectAll("circle")
          .data(nodesToRemove, function(d){
            return d.name;
          })
          .remove();
        vis.selectAll("text")
          .data(nodesToRemove, function(d){
            return d.name;
          })
          .remove();
    })  
});

这是一个更新的jsfiddle：

http://jsfiddle.net/JMStewart/qCykp/

d3.js：删除/导航到子元素

1 个答案: