从 d3 树中的子节点中删除指向根节点的链接

Question

我关注了这个博客来构建一个缩进的可折叠树。我需要对此进行小修改。我希望这棵树没有根。这听起来可能很愚蠢，但这就是我需要的。现在，d3树的两个主要组件是节点和链接。我欺骗了一个解决方法，使用此链接隐藏节点，并将根节点的高度因子设置为 0，并将标签设置为 "。因此，根节点不再可见。但是，我没有做任何与隐藏从 24 个子节点到 root 的链接相关的技巧。因此，所有子节点似乎都链接到"无名称"根节点。我想隐藏指向树根的任何链接。注意：所有 24 个子节点都有子节点。下面是部分不起作用的链接代码。

// Update the links
var link = svg.selectAll("path.link")
    .data(tree.links(nodes), function(d) { return d.target.id; });
link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
    })
    .transition()
    .duration(duration)
    .attr("d", diagonal);
// Transition links to their new position.
link.transition()
    .duration(duration)
    .attr("d", diagonal);
// Transition exiting nodes to the parent's new position.
link.exit().transition()
    .duration(duration)
    .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
    })
    .remove();
// Stash the old positions for transition.
nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
});

Answer 1

可以在链接元素上使用显示属性

link.enter().insert("path", "g")
.attr("class", "link")
.attr("d", function(d) {
    var o = {x: source.x0, y: source.y0};
    return diagonal({source: o, target: o});
})
.style("display", function (d) {
   if (d.depth == 1) { //Is top link                                
         return 'none';
   }
 })
.transition()
.duration(duration)
.attr("d", diagonal);

这将隐藏深度为 1 的所有链接，但仍显示其他链接