在 d3 树中隐藏根节点

Question

我正在使用这个精彩的加权树 d3 演示作为数据流图的起点。不幸的是，我真的需要能够分离树（即没有连接节点的两棵树）。我决定通过使根节点及其分支不可见且不可点击来解决这个问题。（这样，它下面的每个孩子都会看起来是一棵树，但仍然会做所有正确的间距。

我已经成功地隐藏了从根节点到它的子节点的链接，方法是向linkColor函数添加一个新案例，将颜色设置为白色，并将该颜色代码分配给根节点的子节点。

我现在卡住的地方是隐藏根节点本身。我尝试将它的大小设为 0，但这会使其和所有子节点、孙子节点等节点消失。尺寸 1 仍然可见。

我试过使用 javascript 路由而不是数据路由，并尝试添加样式属性、添加用 css 隐藏的类、跳过着色函数等。但是 javascript 的主要问题是我真的想不通了解如何仅隔离/查找根节点。

我尝试过的事情：

d3.json("example.com/mylink.json", function(error, flare) {
  edge_weight.domain([0,flare.size]);
  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;
  root.attr("class", "root"); //I've tried this
  root.style("fill", "#ffffff"); //I've tried this
  root.circle.style("fill", "#ffffff"); //tried this
  root.children.forEach(collapse);
  update(root);
});

我试过影响节点属性本身和应用于节点的设置/样式，但同样，我无法弄清楚如何拉出/识别根。任何帮助/想法表示赞赏！

Answer 1

root 是包含树数据的对象，而不是根节点。

要隐藏根节点并使其不可点击，请使用深度（根有depth = 0）

.style("opacity", function(d, i) {
        return !d.depth ? 0 : 1;
    })
    .style("pointer-events", function(d, i) {
        return !d.depth ? "none" : "all";
    }); 

对于链接，使用相同的逻辑depth：

.style("opacity", function(d, i) {
        return !d.source.depth ? 0 : 1;
    })
    .style("pointer-events", function(d, i) {
        return !d.source.depth ? "none" : "all";
    });

既然你没有张贴你的代码，这里是你这些变化共享bl.ocks：http://bl.ocks.org/anonymous/f29fa00c15a515cae95eb4699128cf03/d2c697b76c8e1e60af1a503b07dcdda94dcd3b2b