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

【问题标题】：Canvas or SVG (or a blend) for large Org Chart用于大型组织结构图的画布或 SVG（或混合）
【发布时间】：2013-10-07 23:46:05
【问题描述】：

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

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

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

【问题讨论】：

我假设您的意思是您有多达 50k 个节点要显示来自的数据，而不是一次？由于您需要缓冲视图，您可以查看leafletjs.com 并查看是否可以帮助您（org/gen. 图表原则上是地图）。
我需要显示树的形状，尽管我不必一次将每个节点的所有数据都拉下来。当有人查看 50k 个节点时，它会开始非常缩小。
使用 SVG 处理 onclick 事件要容易得多，因为每个对象都有一个与之关联的实际 DOM 元素。
我肯定会在上面的原始问题中补充一点，这个组织结构图是高度可变的，我还需要能够显示完整组织结构图的子集。
几年前我已经这样做了。编写了一个网络应用程序：myfamilyhealth.com（试试看，如果需要，可以使用一次性电子邮件，注册是免费的）。那时我只是简单地使用 div 和 css 来绘制图表。它仍然使用 div 和 css 实现。我们的竞争对手使用闪存。我们故意避免使用 Flash 以提供更灵敏的体验。我用相当大的英国王室家族树进行了测试。如果树向上或向下递归大于 10 次，则它不会绘制完整的树，而是为您提供探索远处分支的链接。

【解决方案1】：

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

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

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

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

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

【讨论】：