D3.js的HTML5画布替代方案，图形可视化库

Question

D3.js的HTML5画布替代方案，图形可视化库

22

有没有类似于d3.js（SVG库）的Canvas库？我有一个网站这里，并使用SVG元素编写了一个图表，但在智能手机浏览器上效率不高，速度非常慢。现在，我想将其更改为2D Canvas类型，并查看它是否更好。您可以建议一个适用于此目的的Canvas库吗？

谢谢...

- Eren Golge

5个回答

8

我知道我来晚了，但时代变了，我相信这个问题应该有一个更新的答案。多年来SVG性能得到了很大提高，特别是对于非常复杂的类图形可视化场景，通常具有比较优越的性能；但这确实取决于具体的用例：如果可视化是简单的，并且由成千上万个元素组成，尤其是在移动端，Canvas可能是更快的选择。如果可视化几乎是微不足道的，则WebGL提供了最佳性能，远胜于Canvas-特别是在移动设备上！

然而，WebGL尤其是Canvas比SVG使用起来要更加困难。像CSS动画和过渡之类的东西在SVG中很容易做到，并且由于硬件加速并且完全独立于JavaScript性能，因此具有良好的性能。Canvas和WebGL总是需要JavaScript。

如果你看一下商业图形绘制库yFiles for HTML，你会发现它同时提供了这三种技术。这是因为根据具体的用例，这三种技术都可能是最好的选择。

有一篇博客文章比较了SVG、Canvas和WebGL在图形可视化中的性能，特别是在各种图形大小和设备类别方面进行了比较。结论是没有明显的优胜者。通常情况下，三种技术的组合可以获得最佳结果。对于较小的图形，SVG大多数时候可以给出非常好的结果，并且使用起来很方便。这也是为什么d3.js专注于SVG而不是Canvas和WebGL的原因，我想。

该博客文章链接了一个交互式演示文稿，让您可以使用各种技术并查看它们的优缺点。当然，该演示主要比较了该特定库中使用的三种技术，因此您的结果可能会有所不同，但他们花费了很多时间优化该库中的三种技术，因此我认为结果不会太有偏见。

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

- Sebastian

6

对于三星奥林匹克基因组项目Facebook应用，我们使用了http://thejit.org来制作应用中力导向图样式的动画。当然，它经过了我和我的团队成员的大幅修改，并且只在应用中起到了很小的作用，但它确实是一个非常强大的框架。

- jaredwilli

这个库的兼容性如何？ - dax

5

请看使用HTML5画布渲染的Cytoscape.JS。目前该项目仍处于起步阶段，但其前景看好。根据其维基百科，该库支持桌面和移动浏览器：

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

- amergin

1

很好地利用了各种画布层来优化用户交互重绘！印象深刻。 - Joseph Lust

哥们，非常感谢你提到这个。我今天浏览了一大堆JS库，包括D3、JIT、Arbor、Sigma等等，它们要么太疯狂（D3），要么完全不灵活（JIT...）。这看起来可以救我的一天。 - kralyk

5

Chart.js是一个使用HTML5进行渲染的JavaScript库，用于创建图表。虽然它没有D3那么多功能，但它正在努力成为未来的完美替代品。http://www.chartjs.org/

- C Ried

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh · Accepted Answer

D3并不一定是仅限于svg的库 - 在许多情况下会使用svg，但该库可以制作任何你想要的类型的表现形式。您可以查看Kai Chang使用D3中的画布绘制平行坐标的示例：http://bl.ocks.org/2409451

此外，还可以在这里找到有关性能问题等方面的讨论，可能会有所帮助：https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion