隐藏D3 v4树形图中的根节点和边界线

Question

以下是需要翻译的内容:

针对下面的Fiddle，我想隐藏根节点。非常感谢您的帮助，如果要查看代码，请查看fiddle。

我想我会做类似以下的操作，但我不确定如何/在哪里实现它：

if (d.depth > 0) {
 ...node is drawn
}

下面是图片：

（该图片无法翻译，请查看原图）

- Ron I

---

你的意思是“隐藏”，因为它在DOM中，但不可见吗？为此，您可以给深度为0的节点赋予特定类，并设置该类的可见性。 或者，如果您的意思是“未绘制”，因为它根本不在DOM中，您可以在附加圆等之前对选择进行过滤。 - Tom Shanley

谢谢@TomShanley，我想“不画”它。我该如何修改代码以使用.filter？ // 在父节点的前一个位置输入任何新模式。 var nodeEnter = node.enter().append('g') .attr('class', 'node') .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on('click', click); // 为节点添加圆圈 nodeEnter.append('circle') .attr('class', 'node') .attr('r', 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); - Ron I

Gerardo 说的没错 :) - Tom Shanley

Answer 1

不绘制它并不是指使用“零不透明度”或“隐藏显示”来“绘制它”。实际上，这意味着不将元素追加。

因此，最简单的方法是从数据数组中删除它。只需过滤掉第一个节点：

nodes = nodes.filter(function(d){
    return d.depth != 0;
})

由于 0 是假值，因此这与以下代码相同：

nodes = nodes.filter(function(d){
    return d.depth;
})

并且过滤掉其中的所有链接:

links = links.filter(function(d){
    return d.depth != 1;
})

以下是您更新的代码：https://jsfiddle.net/wa21csbc/

另外，由于这些元素不再被绘制，您可以将数据可视化移动到左侧，以占据空的SVG空间。该空间存在是因为我们在d3.tree()计算位置后过滤了第一个节点之后。

- Gerardo Furtado

---

谢谢，如果您有时间，我发布了一个后续问题：https://stackoverflow.com/questions/46282595/d3-v4-tree-diagram-show-first-node-at-top-of-svg-and-be-able-to-scroll-down - Ron I