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

Question

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

一些要求可能会影响选择：

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

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

Answer 1

谢谢各位的意见。以下是我在探索了一些建议后得出的结论。

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

Canvas：就性能而言，这似乎是一个赢家。但是，此时我需要探索如何将 onClick/onHover 功能添加到每个渲染节点。

传单：这也是赢家。它解决了很多问题，例如类似地图的导航、性能和移动就绪。尽管它不是“如何”绘制组织结构图的解决方案。但是，它的好处在于您可以为其提供图像块或画布。这给了我们一些选择。

所以最后我很可能会先使用图像标题，然后迁移到画布……同时关注 SVG 的性能改进。