5

我使用正交投影制作了一张地图，并尝试提高性能，因为旋转不平滑（大约 6-7FPS）。

这是一张使用 topojson 文件 (world-100m) 构建的世界地图。我需要与国家互动并对它们进行着色，因此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 中做了一个个人资料记录，结果如下：

铬分析 1/2 铬分析 2/2

似乎Animation Frame Fired是缓慢的部分，但我真的不知道它是什么。当我打开它时，有 2 个 GC 事件（垃圾收集器？）但周围什么都没有……你知道在这 90 毫秒期间发生了什么吗？

任何提高性能的提示都非常受欢迎:-)

提前感谢！

顺便说一句，它看起来像这样： 地图概览

4

2 回答 2

3

尝试通过调整 --simplify-proportion、-s 或 --quantization topojson 标志来降低 SVG 路径的复杂性。浏览器仍然具有相当差的 SVG 渲染性能，并且使用地图确实有助于减少点的数量和精度。

于 2013-07-10T12:02:57.983 回答
2

D3.js 使用请求动画帧来执行计时器。

来自 D3 文档：

如果您的浏览器支持，定时器队列将使用 requestAnimationFrame 来实现流畅高效的动画。

据我所知，这是在现代浏览器中执行动画的最佳方法，我认为您不能直接优化这部分。否则，您似乎调用selection_each了可能缓存到变量中的堆栈使用。

于 2013-07-10T08:18:12.340 回答