21

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

谢谢...

4

5 回答 5

24

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

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

于 2012-05-15T12:49:35.827 回答
7

我知道我迟到了，但时代变了，我相信这个问题值得一个更新的答案。多年来，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主要比较了那个库中使用的三种技术，所以你的结果可能会有所不同，但是他们花了很多时间优化那个库中的所有三种技术，所以我认为结果并没有太大的偏差。

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

于 2018-04-07T17:08:50.017 回答
6

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

于 2012-05-14T22:35:51.487 回答
5

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

于 2013-03-26T10:20:58.080 回答
4

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

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

于 2012-12-05T16:26:42.090 回答