Question

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

通过向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);
});

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

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

在d3树中隐藏根节点

1 个答案: