d3.js：正交旋转优化

Question

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

这是一张用 topojson 文件 (world-100m) 构建的世界地图。我需要与 country 进行交互并对它们进行着色，因此svg:path 与 countries 的数量一样多。

加载后，我使用 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 中做了一个配置文件记录，结果如下：

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

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

提前致谢！

顺便说一下，它看起来像这样：

Answer 1

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