2012-12-07 11 views
9

D3を使って散布図を作成したいときは、x軸を横切る何らかの種類のスライダを使って一度に小さな区画を見るだけです。私は効率的にデータをバッファリングし、ユーザーが左または右にスクロールすると素早く要素にアクセスできるjavascriptのメソッドがありますか?D3数千個のデータ点を持つ散布図

私の目標はこのプロトタイプの例hereに似ていますが、データの量は10倍です。この例では、多くのデータ点を作成するとチョークされます。

答えて

6

私はプロットのセクションをインタラクティブにフィルタリングする必要がある約10kポイントの散布図を作成しました。 私はいくつかは、うまくいけば、あまりにもあなたを助けることを願って私のために働いたヒント、一連の共有:

  • それがこのtutorialの最後に行われているように、あなたの.data()オペレータのキー機能を使用します。キーを使用する利点は、変更しない要素を更新する必要がないことです。
  • d3とは関係ありませんが、データ空間をグリッドに分割して、各データポイントが1つのセルに関連付けられています(つまり、各セルはポイントセットのインデックスです)。このようにして、x_0からx_1までアクセスしなければならなかったとき、私は必要なセルが分かっていたので、より洗練された可能なデータポイントにアクセスできるようになりました。
  • 遷移を避ける:SVG要素の千が選択されている場合、私の個人的な経験から.transition()は非常に滑らかではありません(それは、新しいバージョンまたはより高速なプロセッサを搭載した、今より良いかもしれない)
  • 私の場合はポイントを作るために、より便利でした(.attr("display","none"))、SVG要素を削除して作成するのではなく、可視であることがわかります(これがもっと効率的かどうか疑問です)