javascript - 用于大型组织结构图的 Canvas 或 SVG(或混合)

Question

主要问题非常简单...我正在制作一个相当大的组织结构图(或谱系)，我想知道是否应该使用 SVG 还是 Canvas。

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

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

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

Answer 1

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

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

Canvas:就性能而言，这似乎是赢家。然而，此时我需要探索如何向每个呈现的节点添加 onClick/onHover 功能。

传单:这也是赢家。它解决了很多问题，例如类似 map 的导航、性能和移动就绪。尽管它不是“如何”绘制组织结构图的解决方案。然而，它的好处是你可以给它提供图像图 block 或 Canvas 。这给了我们一些选择。

所以最终我可能会首先使用图像标题，然后迁移到 Canvas ......同时密切关注 SVG 的性能进步。