D3交互式2D/3D地球首次交互位置跳转问题排查

我仔细看了你这个交互式地球的zoomed函数代码，首次交互时的位置跳转问题，核心原因是初始状态下transform参数和投影配置没有对齐，加上不同交互类型（滚轮/拖拽）的逻辑处理不一致导致的。下面是修复后的代码，以及对应的问题拆解：

修复后的zoomed函数 #

function zoomed() {
  const transform = d3.event.transform;
  const currentScale = projection.scale();
  const k = currentScale / 200;

  // 首次交互时初始化lastX/lastY，避免未定义导致的跳变
  if (lastX === undefined || lastY === undefined) {
    lastX = transform.x;
    lastY = transform.y;
  }

  if (d3.event.sourceEvent?.wheelDelta) {
    // 滚轮缩放：统一2D/3D的缩放逻辑，保持投影中心对齐
    const newScale = scale * transform.k;
    projection.scale(newScale);

    if (is3D) {
      // 3D模式下基于当前旋转中心调整，避免强制复用旧值导致跳转
      const r = { x: λ(lastX), y: φ(lastY) };
      projection.rotate([(origin.x + r.x) / k, (origin.y + r.y) / k]);
    } else {
      // 2D模式下计算正确的平移偏移，基于transform的实时值而非直接覆盖
      const translateX = origin.x + (transform.x - width/2);
      const translateY = origin.y + (transform.y - height/2);
      projection.translate([translateX, translateY]);
    }
  } else {
    // 拖拽平移：统一2D/3D的参数计算逻辑
    const r = { x: λ(transform.x), y: φ(transform.y) };
    if (is3D) {
      projection.rotate([(origin.x + r.x) / k, (origin.y + r.y) / k]);
    } else {
      const translateX = origin.x + (transform.x - width/2);
      const translateY = origin.y + (transform.y - height/2);
      projection.translate([translateX, translateY]);
    }
  }

  // 更新lastX/lastY为当前transform值，保证后续交互状态连续
  lastX = transform.x;
  lastY = transform.y;

  svg.selectAll('path.graticule').datum(graticule).attr('d', geoPath);
}

关键修复点说明 #

1. 初始化状态补全：首次交互时lastX和lastY可能未定义，直接赋值会导致3D模式下的强制跳转，先判断并赋予transform的初始值，保证状态连续性。
2. 2D缩放逻辑优化：原代码直接覆盖translate时没有考虑transform的累积变化，改为基于实时transform值计算偏移，解决首次缩放时的位置跳变。
3. 3D缩放逻辑调整：原代码在滚轮缩放时强制复用旧的lastX/Y，改为基于当前状态计算旋转中心，确保缩放时地球中心保持稳定。
4. 统一交互逻辑：把2D和3D模式下的平移/旋转计算逻辑对齐，避免不同交互类型下的参数处理不一致。

另外建议你在页面初始化时，就把lastX和lastY设置为初始transform的x/y值（比如初始transform是d3.zoomIdentity，那初始值可以设为width/2和height/2），这样首次交互的状态会更稳定。

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