隐藏 d3 树中的根节点

Question

我正在使用这个精美的d3加权树演示作为数据流程图的起点。不幸的是，我确实需要能够拥有分离的树（即没有连接节点的两棵树）。

我决定通过使根节点和其分支不可见和不可点击来解决这个问题。（这样每个子节点都会显示为一个独立的树，但仍然会做所有正确的间距调整。）

我已经成功地通过向linkColor函数添加一个新的情况，并将颜色设置为白色，然后将该colorCode分配给root的子节点来隐藏从根节点到其子节点的链接。

现在我卡在了隐藏根节点本身上。我尝试将其大小设为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);
});

我尝试影响节点本身和应用于节点的设置/样式，但是，我无法弄清楚如何仅提取/标识根节点。

非常感谢任何帮助/想法！

- singmotor

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

注意：请勿删除html标签。

- Gerardo Furtado