javascript - 树形结构——仅从根节点onload开始

Question

我正在构建一个树形图，如下所示：http ://bl.ocks.org/2503502 。

我想要一棵所有节点都折叠的树，所以初始图应该只包含一个节点（根）。页面加载时，只应显示根节点，然后单击时，将显示其余的子节点。

我该怎么做呢？

Answer 1

我可以看到这是不久前被问到的，但无论如何我都会回答，因为我处于类似的情况。

您在这里有几个选项，具体取决于您是否希望根节点可单击以及子节点完整显示（单击根节点后），因为它当前显示在您提供的示例中，或者您是否希望所有子节点也会崩溃。

选项 1（仅根节点折叠）

在初始化d3对象时，在函数中使用update(root);（为其执行ctrl+f或cmd+ f）进行编码，放入toggle(root). 变量名称root根据给出的示例，您的版本和函数名称可能不同（因为您没有提供示例代码来解决）。

选项 2（所有节点折叠）

您执行与上面的选项 1 相同的操作，但就在新插入之前，toggle(root);您还放置了root.children.forEach(toggleAll);wheretoggleAll是您还需要插入的函数：

function toggleAll(d) {
    if (d.children) {
        d.children.forEach(toggleAll);
        toggle(d);
    }
}

替代选择

我给出的选项不限于以上。如果您按照 brantolsen.github.com 的这个示例（https://stackoverflow.com/a/11649427），您会发现其他实现您想要实现的目标的示例。