如何为D3.js的geoOrthographic地球动画添加平滑过渡？

嘿，这个问题我之前做地球可视化的时候也踩过坑！直接用d3.interval硬给投影赋值旋转参数，肯定会像你说的那样瞬间跳转，完全没过渡感。咱们可以用D3自带的过渡（transition）机制来实现平滑的旋转动画，具体操作起来很简单：

核心思路：用D3的过渡插值旋转角度 #

D3的transition配合tween方法，可以帮我们在指定时间内，平滑地从当前旋转角度插值到目标角度，而不是直接跳转。因为d3.geoOrthographic的rotate()方法接受的是一个数组（格式为[λ, φ]，分别对应绕Z轴和X轴的旋转角度），我们可以用d3.interpolate来处理这个数组的平滑过渡。

改造后的代码示例 #

首先，我们封装一个专门处理平滑旋转的函数：

// 传入目标旋转坐标，实现平滑过渡
function smoothRotateTo(targetCoords) {
  // 获取当前投影的旋转状态
  const currentRotate = projection.rotate();
  
  // 创建过渡，设置动画持续时间（这里是1500毫秒，可根据需求调整）
  d3.transition()
    .duration(1500)
    .tween("earthRotate", function() {
      // 创建插值器：从当前旋转值过渡到目标值
      const interpolateRotate = d3.interpolate(currentRotate, targetCoords);
      
      // 每一步的回调：更新投影并重新绘制路径
      return function(t) {
        // t是0到1之间的数值，代表过渡进度
        projection.rotate(interpolateRotate(t));
        // 重新生成路径并更新
        map.selectAll("path").attr("d", d3.geoPath().projection(projection));
      };
    });
}

然后，当你需要切换到目标国家时，直接调用这个函数即可：

// 示例：切换到中国的目标旋转坐标（可根据实际需求调整数值）
smoothRotateTo([-104, 35]);
// 切换到英国的目标旋转坐标
smoothRotateTo([0.1276, -51.5074]);

为什么之前的方法不行？ #

你之前用d3.interval直接赋值projection.rotate(coOrdinates)，相当于瞬间把旋转角度改成了目标值，没有中间的过渡帧，所以看起来是“跳”过去的。而用transition的tween方法，D3会自动在指定时间内生成一系列中间帧，每一步都更新投影并重新绘制，自然就有了平滑的旋转效果。

额外优化：自动轮播多个国家 #

如果需要自动切换不同国家，可以利用过渡的end事件，在一个旋转动画结束后触发下一个：

// 定义多个国家的目标旋转坐标
const countryRotations = [
  [0.1276, -51.5074], // 英国
  [-104, 35], // 中国
  [-74.006, -40.7128] // 美国
];
let currentIndex = 0;

function rotateNextCountry() {
  smoothRotateTo(countryRotations[currentIndex]);
  currentIndex = (currentIndex + 1) % countryRotations.length;
  // 等当前过渡结束后，再触发下一个旋转
  d3.transition().duration(1500).on("end", rotateNextCountry);
}

// 启动自动轮播
rotateNextCountry();

注意事项 #

• 目标旋转坐标的格式要匹配d3.geoOrthographic.rotate()的要求：通常如果想让某个经纬度（lon, lat）的点处于视野中心，需要把旋转值设为[-lon, -lat]，你可以根据实际显示效果微调数值。
• 过渡时长duration可以根据需求调整，数值越大旋转越慢，反之则越快。

内容的提问来源于stack exchange，提问作者throwawayryan