[解決済み] 高速で応答性の高いインタラクティブなチャート/グラフ。SVG、Canvas、その他？

質問

私は、基本的にズーム可能でパンニング可能なグラフに何千ものポイントをレンダリングするプロジェクトの更新に使用する正しい技術を選ぼうとしています。Protovis を使用した現在の実装は、パフォーマンスが不十分です。ここでそれをチェックしてください。

http://www.planethunters.org/classify

完全に拡大すると、約2000ポイントになります。下部のハンドルを使用して少しズームインし、ドラッグして移動してみてください。かなりぎこちなく、CPU 使用率は、本当に高速なコンピュータでない限り、おそらく 1 つのコアで 100% になることがわかります。フォーカスエリアを変更するたびに protovis の再描画が呼び出されるため、非常に遅くなり、描画されるポイントが多くなるとさらに悪化します。

私は、アニメーションとインタラクションでより反応するように、基礎となる視覚化技術を変更するだけでなく、インターフェイスにいくつかのアップデートを行いたいと思います。以下の記事から、別の SVG ベースのライブラリか、キャンバス ベースのもののどちらかを選択する必要があるように思われます。

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

d3.js は、Protovisから発展したもので、SVGベースで アニメーションのレンダリングに優れているとされています。 . しかし、どの程度優れているのか、またその性能の上限はどれくらいなのか、私は疑問を持っています。そのため、次のような canvas ベースのライブラリを使用して、より完全なオーバーホールを行うことも検討しています。 KineticJS . しかし、1 つのアプローチまたは別のアプローチを使用することに深く入り込む前に、これだけのデータで同様の Web アプリケーションを行ったことのある人の意見を聞きたいと思います。

最も重要なことはパフォーマンスで、他のインタラクション機能の追加やアニメーションのプログラミングの容易さには二の足を踏みます。おそらく、各ポイントに小さなエラー バーがあり、一度に 2000 ポイントを超えることはないでしょう。 ズームイン、ズームアウト、およびパンニングはスムーズである必要があります。 最新のSVGライブラリがこれでまともなら、おそらくd3の使いやすさは、KineticJSなどのセットアップの増加を上回ります。しかし、特に遅いコンピュータを持つ人々にとって、canvasを使用することに大きなパフォーマンス上の利点があるのなら、私は間違いなくその方法を選びたいのです。

NYTimes が作成した、SVG を使用しながらも十分に滑らかなアニメーションを行うアプリの例です。 http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . このパフォーマンスが得られ、独自の canvas 描画コードを記述する必要がないのであれば、おそらく SVG を使用します。

のハイブリッドを使っているユーザーがいることに気づきました。 d3.js 操作と canvas レンダリングの組み合わせ . しかし、これに関する多くのドキュメントをオンラインで見つけることができませんし、その投稿の OP と連絡を取ることもできません。どなたかこの種の DOM-to-Canvas ( デモ , コード ) の実装について、私も聞いてみたいと思っています。データを操作できることと、レンダリング方法をカスタムコントロールできること（したがってパフォーマンス）の良いハイブリッドに思えますが、すべてをDOMにロードしなければならないのは、やはり遅くなるのではと疑問に思っています。

これと似たような既存の質問があることは知っていますが、どれもまったく同じことを尋ねているわけではありません。ご協力ありがとうございます。

フォローアップ : 私が最終的に使用した実装は、以下の通りです。 https://github.com/zooniverse/LightCurves

どのように解決するのですか？

幸いなことに、2000個の円を描くことは、テストするのがかなり簡単な例です。そこで、Canvas と SVG のそれぞれ 2 つずつ、4 つの可能な実装を紹介します。

• キャンバスの幾何学的ズーム
• キャンバスのセマンティックズーム
• SVG ジオメトリック・ズーミング
• SVG セマンティックズーム

これらの例では、D3の ズーム動作 を使用して、ズームとパンを実装しています。円が Canvas と SVG のどちらでレンダリングされるかは別として、他の大きな違いは、D3 で使用する際に 幾何学的 または セマンティック ズーム。

ジオメトリック ズーミングは、ビューポート全体に 1 つの変換を適用することを意味します (ズームインすると、円は大きくなります)。対照的に、セマンティック ズーミングは、各円に個別に変換を適用することを意味します (つまり、ズームインすると、円は同じ大きさのまま広がります)。Planethunters.org は現在、セマンティック ズームを使用していますが、他のケースを考慮することも有用かもしれません。

幾何学的なズームは実装を単純化します: 翻訳とスケールを一度適用し、それからすべての円を再レンダリングします。SVG の実装は特に単純で、単一の "transform" 属性を更新しています。どちらの幾何学的なズームの例も、性能は十分すぎるほどだと感じます。セマンティックズームについては、D3がProtovisよりもかなり高速であることに気づかれるでしょう。これは、各ズームイベントに対して行う作業がかなり少なくなっているためです。(CanvasベースのセマンティックズームはSVGよりも少し軽快ですが、SVGのセマンティックズームはまだレスポンスが良いと感じられます。

しかし、パフォーマンスのための特効薬はなく、これら 4 つの可能なアプローチは可能性の全領域をカバーし始めるものではありません。