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

對於三星奧林匹克基因組項目的Facebook應用程序 ，我們使用http://thejit.org為應用程序制作力導向圖形式動畫。 當然，我和我的團隊中的其他人都對它進行了大量修改，並且只在應用程序中起了很小的作用，但它是一個非常強大的框架。

Answer 3

Chart.js是一個剛出來的javascript庫，它使用HTML5創建圖表進行渲染。 它不像D3那樣具有包容性，但它正在努力成為未來的產品。 http://www.chartjs.org/

Answer 4

看一下使用HTML5畫布進行渲染的Cytoscape.JS 。 在撰寫本文時，它還處於起步階段，但該項目似乎很有希望。 根據其wiki，該庫支持桌面和移動瀏覽器：

Cytoscape.js可以輕松集成到您的webapp中，特別是因為Cytoscape.js支持桌面瀏覽器（如Chrome）和移動瀏覽器（如iPad）。

Answer 5

我知道我遲到了，但時代已經改變，我相信這個問題值得更新。 多年來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的原因。

有一個互動演示鏈接從該博客條目，讓你玩各種技術，看看他們的優點和缺點。 當然，該演示主要比較了該特定庫中使用的三種技術，因此您的結果可能會有所不同，但是他們花了很多時間來優化該庫中的所有三種技術，因此我認為結果不會太偏頗。

^{免責聲明：我為創建上述圖書館的公司工作，但我並不代表我的雇主。 我認為我所說的不僅僅適用於該庫。}