使 D3js DataNode 树运行得更快

Question

我正在改编 Rob Schmuecker 的这个 D3 示例。它是一个 DataNode 树，具有许多不错的功能，如平移、缩放和子项切换。
我已经删除了它的所有拖放功能，因为我不需要它。否则，按代码与示例（目前）几乎相同。

我希望使用节点树来填充数百个甚至数千个节点。在 1000 个节点时，浏览器有点冻结。 Firefox 非常滞后，我不得不停止脚本。 Chrome 滞后一点。

到目前为止我唯一尝试过的是创建隐藏所有子节点的图形（添加到 oParent._children，而不是 oParent.children）。 Chrome 很好地处理了这种方法，但 firefox 的表现稍好一些。

我打算添加很多东西，比如悬停效果和父子关联视觉效果等，所以我怀疑延迟可能会成为一个更大的问题。

有人对如何让浏览器处理延迟问题有任何进一步的建议或想法吗？

Answer 1

除了从隐藏所有子节点开始之外，我最终做的是将数据节点和可视节点分开，这样可视节点实际上只在运行时创建。