d3.js 的 HTML5 画布替代品，图形可视化库答案

【问题标题】：HTML5 canvas alternatives for d3.js, graph visualization libraryd3.js 的 HTML5 画布替代品，图形可视化库
【发布时间】：2012-05-22 10:25:48
【问题描述】：

是否有任何类似于 d3.js 的 Canvas 库（是 svg 库）。我有一个网站here，我用 svg 元素编写了一个图表，但是它在智能手机的浏览器上效率不高，而且运行速度很慢。我现在想用它的 2d 画布类型来改变它，看看它是否更好。你能推荐一个对此有用的画布库吗？

谢谢...

【问题讨论】：

标签： html web-applications html5-canvas d3.js

【解决方案1】：

对于Samsung Olympic Genome Project facebook app，我们使用http://thejit.org 为应用制作了力导向图形样式动画。当然，我和我团队中的其他人对它进行了大量修改，在应用程序中只占很小的一部分，但它是一个非常强大的框架。

【讨论】：

这个库的兼容性如何？

【解决方案2】：

D3 不一定是仅 svg 的库 - 在许多情况下都使用 svg，但该库可以执行您想要制作的任何类型的表示。参见这个在 D3 中使用画布的平行坐标示例，作者 Kai Chang：http://bl.ocks.org/2409451

另请参阅此处以了解有关性能问题等的一些讨论，这可能会有所帮助：https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion

【讨论】：

有 SVG 和 CANVAS 的性能对比吗？似乎画布要好得多，但是像 D3 对 svg 所做的那样，用于数据可视化的以画布为中心的库并不多
@V3ss0n：关于 SVG 与画布的比较，请查看OpenLayers website 上提供的比较。
@V3ss0n：见citeseerx.ist.psu.edu/viewdoc/…

【解决方案3】：

看看Cytoscape.JS，它使用 HTML5 画布进行渲染。在撰写本文时，它还处于起步阶段，但该项目似乎很有希望。根据其 wiki，该库支持桌面和移动浏览器：

Cytoscape.js 很容易集成到您的 web 应用程序中，尤其是因为 Cytoscape.js 支持桌面浏览器（如 Chrome）和移动设备浏览器，例如 iPad。

【讨论】：

很好地使用各种画布层来优化用户交互重绘！印象深刻。
老兄，非常感谢您提到这一点。今天我浏览了一大堆 JS 库，包括 D3、JIT、Arbor、Sigma 等等，它们要么是疯狂的（D3），要么是完全不灵活的（JIT，...）。这看起来可以挽救我的一天。

【解决方案4】：

Chart.js 是一个刚刚问世的 JavaScript 库，它使用 HTML5 创建图表进行渲染。它不像 D3 那样具有包容性，但它正在努力成为未来的那样。 http://www.chartjs.org/

【讨论】：

【解决方案5】：

我知道我迟到了，但时代变了，我相信这个问题值得得到更新的答案。多年来，SVG 的性能有了很大的提高，特别是对于非平凡的图形可视化，它通常提供卓越的性能；但这实际上取决于确切的用例：如果可视化很简单并且由数千个元素组成，尤其是在移动设备上，Canvas 可能是更快的选择。如果可视化几乎是微不足道的，那么 WebGL 提供了最好的性能并轻松击败了 Canvas——尤其是在移动设备上！

但是，特别是 WebGL 和 Canvas 比 SVG 使用的声明性方法更难使用。像 CSS 动画和过渡这样的事情很容易用 SVG 完成，并且由于硬件加速并且完全独立于 JavaScript 性能而提供了良好的性能。 Canvas 和 WebGL 总是需要 JavaScript。

如果您查看商业绘图库yFiles for HTML，您会发现它同时提供了所有三种技术。这是因为这三个都可能是最佳选择，具体取决于具体的用例。

有一个blog entry 比较了 SVG、Canvas 和 WebGL 的性能，尤其是在图形可视化方面。它比较了各种图形大小和设备类别。 “结论”是没有明确的赢家。很多时候，这三种技术的结合会产生最好的效果。但是，对于较小的图形，SVG 在大多数情况下都能提供非常好的结果，并且使用起来很愉快。这也是 d3.js 专注于 SVG 而不是 Canvas 和 WebGL 的原因，我想说。

该博客条目链接了一个互动式demo，让您可以使用各种技术并了解它们的优缺点。当然这个demo主要是对比了那个具体库中使用的三种技术，所以你的结果可能会有所不同，但是他们花了很多时间优化了那个库中的所有三种技术，所以我认为结果并没有太大的偏差。

^{免责声明：我为创建上述库的公司工作，但我在这里不代表我的雇主。我认为我所说的应该不仅适用于那个图书馆。}

【讨论】：