d3.js - 在 D3 v4 TreeMap 中隐藏根节点和边

Question

对于以下Fiddle我想隐藏根节点。感谢任何帮助，要查看代码，请查看 fiddle 。

我想我会做类似下面的事情，但我不确定如何/在哪里实现它:

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

下图:

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;
})

这是您更新的 fiddle :https://jsfiddle.net/wa21csbc/

此外，由于不再绘制这些元素，您可以将 dataviz 向左移动，从而占据空的 SVG 空间。那个空间在那里是因为我们在 d3.tree() 计算位置后过滤掉第一个节点。