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

HTML5 canvas alternatives for d3.js, graph visualization library

提问by Eren Golge

Is there any Canvas library that is like d3.js (is svg library). I have a website hereand I coded a graph with svg elements however it is not efficient on smart phone's browsers and works so slow. I now, want to change it with a 2d canvas type of it and see whether it is better or not. Can you suggest a canvas library that is useful for this purpose?

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

Thanks...

谢谢...

回答by Josh

D3 is not necessarily an svg only library - svg is used in many cases, but the library can do any kind of representations that you would like to make. See this example of parallel coordinates using canvas in D3, by Kai Chang: http://bl.ocks.org/2409451

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

Also see here for some discussion on performance issues, etc, that might be helpful: https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion

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

回答by jaredwilli

For the Samsung Olympic Genome Project facebook app, we used http://thejit.orgto make the force directed graph style animation for the app. It's heavily modified by me and others on my team of course, and only plays a very small part in the app, but it's quite a powerful framework.

对于三星奥林匹克基因组计划的 facebook 应用程序，我们使用http://thejit.org为应用程序制作了力导向图样式的动画。当然，我和我团队中的其他人对它进行了大量修改，在应用程序中只占很小的一部分，但它是一个非常强大的框架。

回答by C Ried

Chart.js is a javascript library that just came out that creates charts using HTML5 for rendering. Its not as feature inclusive as D3, but it is working to become exactly that in the future. http://www.chartjs.org/

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

回答by Sebastian

I know I am late to the party, but times have changed, and I believe this question deserves an updated answer. SVG performance has improved a lot over the years and especially for the non-trivial graph-like visualizations it often gives superior performance; but it really depends on the exact use-case: If the visualization is simple and consists of thousands of elements, especially on mobile, Canvas may be the faster option. If the visualization is almost trivial, WebGL gives the best performance and beats Canvas hands-down - especially on mobile!

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

However WebGL especially and also Canvas are a bit harder to use than the declarative approach that SVG uses. Things like CSS animations and transitions are easy to do with SVG and give good performance due to being hardware accelerated and totally independent of JavaScript performance. Canvas and WebGL always require JavaScript.

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

If you take a look at the commercial graph drawing library yFiles for HTMLyou will see that it offers all three technologies at the same time. This is because all three can be the best choice, depending on the exact use-case.

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

There is a blog entrythat compares the performance of SVG, Canvas, and WebGL especially in the context of graph visualization. It compares various graph sizes and categories of devices. The "conclusion" is that there is not a clear winner. Often times the combination of all three technologies gives the best results. For smaller graphs, though, SVG most of the time gives very good results and is a pleasure to work with. That's also the reason why d3.js has its focus on SVG, rather than Canvas and WebGL, I would say.

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

There is an interactive demolinked from that blog entry that let's you play with the various technologies and see their strengths and weaknesses. Of course the demo mainly compares the three technologies used in that specific library so your results may vary, but they spent a lot of time optimizing all three technologies in that library, so I think the results are not too biased.

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

^{Disclaimer: I work for the company that creates the above mentioned library, but I do not represent my employer here on SO. I think what I said should be valid not just for that library.}

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

回答by amergin

Take a look at Cytoscape.JSwhich uses a HTML5 canvas for rendering. At the time of writing this it's in its infancy but the project seems promising. According to its wiki the library supports both desktop and mobile browsers:

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

Cytoscape.js is easily integrated into your webapp, especially since Cytoscape.js supports both desktop browsers, like Chrome, and mobile browsers, like on the iPad.

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