javascript - d3.js : orthographic rotation optimization

Question

我使用正交投影制作了一张 map ，我尝试提高性能，因为旋转不平滑(大约 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 中做了一个配置文件记录，结果如下:

看来 Animation Frame Fired 是缓慢的部分，但我真的不知道它是什么。当我打开它时，有 2 个 GC 事件(垃圾收集器？)但周围什么都没有...你知道这 90 毫秒内发生了什么吗？

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

提前致谢!

顺便说一句，它看起来像这样:

Answer 1

尝试通过调整 --simplify-proportion、-s 或 --quantization topojson 标志来降低 SVG 路径的复杂性。浏览器的 SVG 渲染性能仍然很差，对于 map 来说，它确实有助于减少点的数量和精度。