树形结构——仅从根节点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); 其中toggleAll 是您还需要插入的函数：

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

备选方案

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