5
高速で応答性の高いインタラクティブなチャート/グラフ：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/ Protovisから生まれたd3.jsはSVGベースであり、アニメーションのレンダリングに優れているはずです。ただし、パフォーマンスの上限がどれほど優れているかについては疑問です。そのため、KineticJSのようなキャンバスベースのライブラリを使用して、より完全なオーバーホールも検討しています。ただし、1つのアプローチを使い始める前に、これだけ多くのデータを使用して同様のWebアプリケーションを実行した人からの意見を聞き、意見を聞きたいと思います。 最も重要なのはパフォーマンスです。2番目の焦点は、他の対話機能の追加とアニメーションのプログラミングの容易さにあります。おそらく、一度に2000ポイントを超えることはなく、それぞれに小さなエラーバーがあります。ズームイン、ズームアウト、パンニングはスムーズである必要があります。最新のSVGライブラリがこれで適切な場合、おそらくd3の使いやすさはKineticJSなどの設定の増加よりも優先されます。ただし、キャンバスを使用することで、特に低速のコンピューターを使用する人にとって、パフォーマンスに大きな利点がある場合は、間違いなくその方法を好むでしょう。 NYTimesが作成した、SVGを使用しているが、順調にスムーズにアニメーション化するアプリの例：http : //www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html。そのパフォーマンスが得られ、独自のキャンバス描画コードを記述する必要がない場合は、おそらくSVGを使用します。 一部のユーザーは、キャンバスレンダリングと組み合わせたd3.js操作のハイブリッドを使用していることに気付きました。しかし、私はこれについてオンラインで多くのドキュメントを見つけることができないか、その投稿のOPに連絡することができません。このようなDOM-to-Canvas（デモ、コード）の実装を経験したことがある方は、ぜひご連絡ください。データを操作できることと、データのレンダリング方法（したがってパフォーマンス）をカスタム制御できることの良いハイブリッドのようですが、すべてをDOMにロードしなければならない場合でも、処理が遅くなるのではないかと思います。 これに似た既存の質問がいくつかあることは知っていますが、まったく同じことを尋ねる質問はありません。ご協力いただきありがとうございます。 フォローアップ：私が最終的に使用した実装はhttps://github.com/zooniverse/LightCurvesにあります