1

私は最近、crossfilter、dc.js、および leaflet.markerCluster を組み込んだプロトタイプ データ エクスプローラーの小型バージョンを作成しました。小さいバージョン (プロトタイプ ダッシュボード) は正常に動作します。私が抱えている問題は、20k ポイント以上にスケールアップしようとしたときです。

グラフは引き続き正しくレンダリングされ、マップはズームまたはパン時にグラフをスムーズに更新するように機能しますが、グラフの 1 つを操作すると、他のグラフ間の移行がスムーズではなくなります。スムーズに移行するのではなく、次の位置にジャンプします。

マップを削除してみましたが、これにより、他のチャート間のトランジションが再び滑らかなトランジションに戻りました。

インタラクションが発生するたびに、再レンダリング プロセスが 20k ポイントに追いついているのだろうかと思っています。

どこで解決策を探すべきかについて誰か提案があれば、私は感謝します。

4

1 に答える 1

0

ブロックを投稿していただきありがとうございます。これにより、テストが容易になります。

あなたのそれぞれに200行〜46k行を生成することで、より多くのポイントをシミュレートしました。100x ~ 23k 行 (十分な RAM を搭載した 2017 iMac) でわずかなスタッタリングしか見られませんでした。

Leaflet.markercluster は、10,000 ポイントを超えると遅くなることが知られています。46k 行の場合、Leaflet.markercluster が Leaflet レイヤーをクリアして追加するのに約 475 ミリ秒かかりました。

マーカークラスター フレーム チャート

JavaScript にはスレッドが 1 つしかないため (ワーカーを使用しない限り)、D3 はrequestAnimationFrame流動的なアニメーションを生成するために 16 ミリ秒ごとに (実際には) タイムアウトを取得する必要があります。

回避策の 1 つは、マップの再描画を他の人が完了するまで 500 ミリ秒遅らせることです。

  dc.override(mapChart, 'redraw', function() {
      window.setTimeout(() => mapChart._redraw(), 500);
  });

回避策を使用してブロックをフォークします。

もちろん、これによりマップの再描画に 500 ミリ秒も時間がかかります。十分な速さでクリックすると、チャートを描画しようとしているときに、最後のマップの再描画がまだ実行されます。

チャンクされたaddLayersオプションを試すこともできますが、chunkedIntervalを非常に低く設定する必要があると思います。これにより、マーカークラスターも遅くなります。

これほど多くのデータを効率的に処理することは、JavaScript で可能です。ここでは明らかに crossfilter に問題はありません。Cloistering アルゴリズムが本質的に高すぎるかどうかはわかりません。問題の誰かがポイントを事前に集計することを提案しましたが、これは個々のポイントを見ることができないことを意味すると思います.

于 2019-11-08T18:47:13.570 に答える