Javascript d3.js：正交旋转优化

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

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

欢迎提供任何提高性能的提示：-）

提前谢谢

顺便说一下，它看起来是这样的： D3.js用于执行计时器

:

如果浏览器支持，计时器队列将使用requestAnimationFrame进行流畅高效的动画

---

正如我所知，这是在现代浏览器中执行动画的最佳方法，我不认为您可以直接优化这一部分。否则，您似乎会调用stack use

selection\u each

，它们可能会被缓存到变量中。

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

是的，我知道请求动画帧，但我希望他会尽可能快。我对请求动画帧的理解是，它可以避免更频繁的循环，浏览器可以重新绘制以避免无用的计算，但这不应该使动画变慢。对于

选择\u each

，您完全正确，我将缓存此结果。谢谢在生成topojson文件的同时添加--simplify比例0.6，将性能从11 FPS提高到20 FPS，而不会丢失太多细节。