5

正射投影を使用してマップを作成しましたが、回転がスムーズではないため (6 ～ 7 FPS 程度)、パフォーマンスを改善しようとしています。

topojsonファイル(world-100m)で構築した世界地図です。country とやり取りして色付けする必要があるため、countries と同じ数の svg:path が存在します。

ロード後、 d3.timer を使用して自動回転機能を起動しました:

autoRotate = () =>
  @start_time = Date.now()     # Store the current time (used by automatic rotation)

  d3.timer () =>
    dt = Date.now() - @start_time

    if @stopRotation or dt > @config.autoRotationDuration
      true
    else
      @currentRotation[0] = @currentRotation[0] - @config.autoRotationSpeed
      @projection.rotate @currentRotation
      redrawPathsOnRotationOrScale(@currentRotation, @projection.scale())
      false

redrawPathsOnRotationOrScale = (rotation, scale, duration = 1) =>
  @currentRotation = rotation

  @projection
    .rotate(@currentRotation)
    .scale(scale)

  @groupPaths.selectAll("path")
    .attr("d", path)

なぜ遅いのかを理解するために、Chrome でプロファイル レコードを作成しました。結果は次のとおりです。

Chrome プロファイリング 1/2 Chrome プロファイリング 2/2

Animation Frame Firedが遅い部分のようですが、それが何であるかはよくわかりません。それを開くと、2 つの GC イベント (ガベージ コレクター ?) がありますが、周りには何もありません... この 90 ミリ秒の間に何が起こっているか分かりますか?

パフォーマンスを改善するためのヒントは大歓迎です:-)

よろしくお願いします！

ちなみにこんな感じです。 地図の概要

4

2 に答える 2

2

D3.js はRequest Animation Framesを使用してタイマーを実行します。

D3ドキュメントから：

ブラウザーがサポートしている場合、タイマー キューは requestAnimationFrame を使用して滑らかで効率的なアニメーションを実現します。

私が知っているように、最新のブラウザーでアニメーションを実行するのが最善の方法であり、この部分を直接最適化できるとは思いません。selection_eachそれ以外の場合は、おそらく変数にキャッシュされる可能性のあるスタック使用を呼び出しているようです。

于 2013-07-10T08:18:12.340 に答える