我使用正交投影制作了一张 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 毫秒内发生了什么吗?
任何提高性能的技巧都非常受欢迎:-)
提前致谢!
顺便说一句,它看起来像这样:
最佳答案
尝试通过调整 --simplify-proportion、-s 或 --quantization topojson 标志来降低 SVG 路径的复杂性。浏览器的 SVG 渲染性能仍然很差,对于 map 来说,它确实有助于减少点的数量和精度。
关于javascript - d3.js : orthographic rotation optimization,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17565246/