javascript - D3.js 中的可折叠树

Question

我目前正在学习 D3.js 并尝试使用它。目前我正在研究一棵树，这非常好并且很容易静态完成。

因为我试图避免只是从已经存在的示例中“复制粘贴”，并尝试阅读文档，...好吧，我遇到了很多“问题”，而且我似乎无法解决这个问题。

Here's a fiddle一棵简单的、可折叠的小树。链接尚未折叠。那将是下一步，现在不相关。

在根节点上折叠按预期工作。所有子节点都消失了。但是，当单击只有一个 child 的中间节点之一时，消失的总是同一个 child ……我不明白为什么。

Click 以被点击的节点作为参数调用 click。在 click 中，toggleChildren 被调用，再次将被点击的节点作为参数。 toggleChildren 存储旧状态并将子级设置为 null...在单击的节点上...这至少是我的想法 ;-)

Answer 1

当你定义:

var node = baseSvg.selectAll(".node")
        .data(nodes);

这在您的数据中缺失:

        .data(nodes, function(d) { return d.id || (d.id = ++i); });

当然，在之前写 var i = 0;。

这是 fiddle :https://fiddle.jshell.net/8ua280wy/