用于大型组织结构图的画布或SVG（或混合）

Question

主要问题很简单......我正在制作一个相当大的组织结构图（或家谱），我想知道我是否应该使用SVG或Canvas。

有些要求可能影响选择：

• 必须能够显示1到50,000个节点/人
• 需要像Google / Bing地图一样平移和缩放。
• 需要能够点击某个节点并弹出一个对话框，其中包含该人员的额外详细信息。

我最初倾向于使用SVG，但我听说在绘制大量项目时会出现性能问题。此外，似乎Canvas在旧版浏览器中有更好的支持。

Answer 1

感谢大家的意见。以下是我在探讨了一些建议后提出的建议。

SVG：由于其矢量化特性及其与DOM的集成，这条路线非常诱人。遗憾的是，渲染+ 100k节点的性能扼杀了这条路线。

画布：表现明智，这似乎是一个胜利者。但是，此时我需要探索如何为每个渲染节点添加onClick / onHover功能。

传单：这也是胜利者。它解决了许多问题，如地图般的导航，性能和移动就绪。虽然它不是“如何”绘制组织结构图的解决方案。然而，它的好处在于你可以提供图像图块或画布。这给了我们一些选择。

所以最后我很可能会开始使用图像标题，然后转移到画布......同时关注SVG中的性能提升。