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

Question

是否有任何类似d3.js的Canvas库(是svg库).我在这里有一个网站,我用svg元素编写了一个图形,但它在智能手机的浏览器上效率不高,而且运行速度很慢.我现在想要用它的2d画布类型来改变它,看它是否更好.你能建议一个对此有用的画布库吗？

谢谢...

Answer 1

D3不一定是仅限svg的库 - 在很多情况下使用svg,但是库可以做任何你想做的表示.请参阅Kai Chang的http://bl.ocks.org/2409451,参见D3中使用画布的并行坐标示例

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

Answer 2

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

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

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

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

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

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

Answer 3

对于三星奥林匹克基因组项目的Facebook应用程序,我们使用http://thejit.org为应用程序制作力导向图形式动画.当然,我和我的团队中的其他人都对它进行了大量修改,并且只在应用程序中起了很小的作用,但它是一个非常强大的框架.

Answer 4

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

Cytoscape.js 可以轻松集成到您的 Web 应用程序中，特别是因为 Cytoscape.js 支持桌面浏览器（如 Chrome）和移动浏览器（如 iPad）。

Answer 5

Chart.js是一个刚推出的JavaScript库，它使用HTML5进行渲染以创建图表。它不像D3那样具有广泛的功能，但它正在努力成为将来的D3。http://www.chartjs.org/