d3js v3：单击时选择节点答案

【问题标题】：d3js v3: Selecting a Node on clickd3js v3：单击时选择节点
【发布时间】：2017-11-23 11:41:52
【问题描述】：

我想我不明白 D3 如何使用它的节点。

我正在加载一个 JSON 文件（分层数组）：

d3.json('readme.json', function(error, data){
    nodes = tree.nodes(data);

我正在将组（以及矩形和其他 svg 对象）附加到一个 svg 容器中：

var gNodes = svgContainer
    .selectAll(".node")
    .data(nodes)
    .enter()
        .append("g")
        .attr("transform", "translate("+2000+","+0+")")
        .on("click", toggle);

我现在要做的是通过单击一个节点（其大小可通过 rect svg 对象看到）来隐藏节点的子节点，但我无法让它工作。

我有一个功能切换：

function toggle(d)

通过点击节点来使用（参见上面的var gNodes）。

在切换中我可以使用d.children，通过调试器我可以看到他找到了正确的节点。

但是如何删除 svgContainer 中的节点和矩形等？它不是这样工作的：

d.children.exit().remove();

我认为.exit().remove() 可以用于选择，而d.children 不是选择（它是其中的数据？）。

但是必须有一种方法可以使用 D3 删除树中节点的子节点。我该怎么做？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

两件事：

你是对的：d 这里指的是数据，而不是选择（也不是 DOM 元素）
exit() 取决于没有数据的 DOM 元素。这里的所有元素都有数据。因此，请单独使用remove()。

由于您没有发布您的运行代码，我将在此示例中基于 Mike Bostock 的答案。

您可以通过过滤选择基于其数据来选择 DOM 元素。在 D3 v4 中，您可以使用 node.descendants() 获取节点的所有后代（children 将仅获取直接后代），过滤 node 选择本身，然后删除元素：

node.on("click", function(d) {
    node.filter(function(e) {
        return d.descendants().splice(1).indexOf(e) > -1
    }).remove();
})

这里是修改后的bl.ocks，点击节点：https://bl.ocks.org/anonymous/269149545ba97c2c0b20c1c2ea0a91d8/72df7ad28935168f07cc33a92f31752849779378

PS：我只删除节点，而不是链接。

PPS：remove 与 hide 不同。您必须决定要对 DOM 元素做什么。

【讨论】：

嗨，谢谢，很接近，但我忘了说我仍在使用 d3js v3 :( 这个版本的节点上似乎没有 descendants() 函数？调试器说node.descendants() 不是函数）
你没有忘记说，它就在标题中。把问题留在这里一段时间，看看是否有人写了 v3 答案。

【解决方案2】：

参考： http://jsfiddle.net/pdj80L43/

function click(d)
{
    if (d.children){
        d._children = d.children;
        d.children = null;
    } 
    else{
        d.children = d._children;
        d._children = null;
    }
    update(d);
}

function dblClick(d) {
    columnAttribute.push(d.name);
    console.log(columnAttribute);
}
function collapse(d){
    if (d.children){
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
    }
}

这很好用！删除所有链接并折叠子树。

【讨论】：