D3.js 可折叠树 - 可视化设定的层数

Question

我正在玩这个可折叠树的例子：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;
    }
}

但是 none 个节点被折叠了，因为 d.depth 属性是 undefined。我深入挖掘并理解（如果我错了请纠正我） depth 属性仅在 nodes 变量初始化后才分配给节点。

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

现在我完全卡住了。有什么办法可以实现吗？

Answer 1

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

D3.js 可折叠树 - 可视化设定的层数

D3.js collapsable tree - visualise set number of levels

javascript

tree

jquery

d3.js