d5.jsのHTML5キャンバス代替、グラフ視覚化ライブラリ
D3.js（svgライブラリ）のようなCanvasライブラリはありますか？私はウェブサイトを持っています here とsvg要素を使用してグラフをコーディングしましたが、スマートフォンのブラウザーでは効率的ではなく、動作が非常に遅いです。私は今、それを2Dキャンバスタイプで変更して、それがより良いかどうかを確認したいと思います。この目的に役立つキャンバスライブラリを提案できますか？
ありがとう...
D3は必ずしもsvgのみのライブラリである必要はありません。多くの場合svgが使用されますが、ライブラリは任意の種類の表現を行うことができます。 Kai Changによる、D3のキャンバスを使用した平行座標のこの例を参照してください。 http://bl.ocks.org/2409451
役立つかもしれないパフォーマンスの問題などについての議論については、こちらもご覧ください： https://groups.google.com/d/topic/d3-js/mtlTsGCULVQ/discussion
Samsung Olympic Genome Project facebook app の場合、 http://thejit.org を使用して、アプリのフォース指向グラフスタイルのアニメーションを作成しました。もちろん、私や私のチームの他のメンバーによって大幅に変更されており、アプリでの役割はごくわずかですが、非常に強力なフレームワークです。
Chart.jsは、HTML5を使用してグラフを作成し、レンダリングするJavaScriptライブラリです。その機能はD3ほど包括的ではありませんが、将来的には完全に機能するように機能しています。 http://www.chartjs.org/
私はパーティーに遅れるのはわかっていますが、時代は変わったので、この質問は最新の答えに値すると思います。 SVGのパフォーマンスは何年にもわたって大幅に改善されており、特に自明ではないグラフのような視覚化の場合、優れたパフォーマンスが得られることがよくあります。しかし、それは実際のユースケースに本当に依存します。視覚化がシンプルで何千もの要素で構成されている場合、特にモバイルでは、Canvasがより高速なオプションになる可能性があります。視覚化がほとんど取るに足らない場合、WebGLは最高のパフォーマンスを提供し、特にモバイルではCanvasに勝ります。
ただし、特にWebGLおよびCanvasは、SVGが使用する宣言的アプローチよりも使用が少し難しいです。 CSSアニメーションやトランジションのようなものはSVGで簡単に実行でき、ハードウェアアクセラレーションがあり、JavaScriptのパフォーマンスから完全に独立しているため、優れたパフォーマンスを提供します。 CanvasとWebGLは常にJavaScriptを必要とします。
市販のグラフ描画ライブラリ yFiles for HTML を見ると、3つのテクノロジーすべてが同時に提供されていることがわかります。これは、正確なユースケースによっては、3つすべてが最良の選択になる可能性があるためです。
特にグラフの視覚化のコンテキストで、SVG、Canvas、およびWebGLのパフォーマンスを比較する ブログエントリ があります。さまざまなグラフのサイズとデバイスのカテゴリを比較します。 「結論」は明確な勝者がいないということです。多くの場合、3つのテクノロジーすべての組み合わせが最良の結果をもたらします。ただし、小さいグラフの場合、ほとんどの場合SVGは非常に優れた結果をもたらすため、操作するのが楽しいです。それが、d3.jsがCanvasやWebGLではなくSVGに重点を置いている理由でもあります。
そのブログエントリからリンクされているインタラクティブな demo があり、さまざまなテクノロジーを試して、それらの長所と短所を確認できます。もちろん、デモは主にその特定のライブラリで使用されている3つのテクノロジーを比較するため、結果は異なる場合がありますが、そのライブラリの3つのテクノロジーすべてを最適化するのに長い時間を費やしたので、結果に偏りがないと思います。
免責事項：私は上記のライブラリを作成する会社で働いていますが、SOでの雇用主の代表ではありません。私が言ったことは、そのライブラリーだけでなく有効であるべきだと思います。
レンダリングにHTML5キャンバスを使用する Cytoscape.JS を見てください。これを書いている時点ではまだ初期段階ですが、プロジェクトは有望であるようです。そのwikiによると、ライブラリはデスクトップとモバイルの両方のブラウザーをサポートしています。
特にCytoscape.jsはChromeのようなデスクトップブラウザーとiPadのようなモバイルブラウザーの両方をサポートしているため、Cytoscape.jsはウェブアプリに簡単に統合できます。