Question

我按照这个blog来构建一个缩进的可折叠树。我需要对此进行一些小修改。我希望这棵树没有根。这可能听起来很愚蠢，但这正是我所需要的。现在，d3树的两个主要组件是节点和链接。我欺骗了一种解决方法，使用此link隐藏节点，并将根节点的高度因子设置为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

您可以在链接元素上使用display属性

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但仍显示其他链接的链接

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

1 个答案: