D3.js可折叠树 - 可视化设置的级别数

D3.js collapsable tree - visualise set number of levels

本文关键字：设置 可视化 js 可折叠 D3      更新时间：2023-09-26

我正在玩这个可折叠树的例子： http://bl.ocks.org/mbostock/4339083

在此示例中，最初仅可视化根及其所有子项。我想知道如何可视化设置数量的级别(例如根和两个附加级别，即根、其子级和根子级的子级(。

我尝试修改collapse(d)函数，其中我指定根据节点的depth属性折叠节点。喜欢：

function collapse(d) {
    if (d.children && d.depth > 3) {
        d._children = d.children;
        d._children.forEach(collapse);
        d.children = null;
    }
}

但是随后没有一个节点折叠，因为d.depth属性是undefined的。我深入研究并理解(如果我错了，请纠正我(depth属性仅在初始化nodes变量后分配给节点。

var nodes = tree.nodes(root).reverse();

现在我完全被困住了。有什么办法可以做到这一点吗？

我找到了我问题的解决方案。事实证明，节点在调用tree.nodes(root)之前没有父属性、位置(x、y 坐标(和深度属性，这会计算上述所有属性。所以我所要做的就是在调用collapse函数之前调用该函数。之后，可以仅折叠那些具有一定深度的节点，这些节点将仅可视化一定数量的级别。

相关文章：