Question

我想我不明白D3如何与其节点配合使用。

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

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

我将组（以及rects和其他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中删除节点和rects等？它没有这样的工作：

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

我认为这个.exit().remove()适用于选择而d.children不是选择（它内部的数据是什么？）。

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

Answer 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：删除与隐藏不同。你必须决定你想用DOM元素做什么。

Answer 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;
    }
}

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

d3js v3：点击选择节点

2 个答案: