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

主要问题非常简单...我制作了一个相当大的组织结构图（或族谱），我想知道是否应该使用SVG或Canvas 。画布或SVG（或混合）适用于大型组织结构图

一些要求可能会摇摆的选择：

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

我假设你的意思是你有多达5万个节点要显示来自*的数据*，而不是一次？由于您需要缓冲视图，因此您可以查看http://leafletjs.com并查看它是否可以帮助您（原则上，组织图是地图）。 – K3N

我需要显示树的形状，尽管我不必一次拉下有关每个节点的所有数据。当有人在看50k节点时，它会开始非常小。 –

使用SVG处理'onclick'事件要容易得多，因为每个对象都有一个与之关联的实际DOM元素。 –

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

SVG：由于其向量化特性及其与DOM的集成，此路由非常诱人。令人遗憾的是，渲染+ 100k节点的性能导致这条路线死亡。

帆布：表现明智这似乎是一个胜利者。不过，在这一点上，我将需要探索如何为每个渲染节点添加onClick/onHover功能。

小册子：这也是赢家。它需要处理诸如地图导航，性能和移动设备等许多问题。虽然它不是解决如何绘制组织结构图的解决方案。不过，最棒的是你可以为它提供图像瓷砖或画布。这给了我们一些选择。

因此，最终很有可能我会先使用图像标题，然后迁移到画布......同时关注SVG中的性能提升。

2013-10-16 16:00:21

回答