如何让D3 GeoMercator投影与缩放变换保持同步？

问题背景 #

当前使用D3缩放处理器通过ev.transform直接更新SVG路径变换时，地图缩放平移显示正常，但调用projection(point)计算坐标结果错误。仅在缩放级别k=1时能通过更新投影平移实现同步，其他缩放级别下无法正确关联投影scale与缩放变换的k值。

原缩放处理器代码：

const zoom = d3.zoom()
    .scaleExtent([1,25])
    .translateExtent([[width * -0.5, height * -0.5], [width * 1.5,height*1.5]])
    .on('zoom', (ev) => {
       svg.selectAll('path').attr('transform', ev.transform);  
    })

仅在k=1时生效的投影更新代码：

.on("end", (ev)=> {
  projection.translate([origTrans[0] + ev.transform.x * ev.transform.k, origTrans[1] + ev.transform.y * ev.transform.k]);
  const c =  projection([-3.3632, 55]);
  svg.append("circle")
    .attr("cx", c[0])
    .attr("cy", c[1])
    .attr("r", 9)
    .attr("fill", "red");
}); 

解决方案 #

要让投影与缩放行为完全同步，需明确GeoMercator投影scale与D3缩放变换k值的关联：D3缩放的k是相对初始状态的缩放倍数，投影的scale是绝对缩放值，初始投影scale为固定基准值。

步骤1：保存初始投影参数 #

初始化缩放前，先保存投影的初始scale和translate：

const initialScale = projection.scale();
const initialTranslate = projection.translate();

步骤2：更新缩放事件处理器 #

修改zoom事件回调，同步更新投影的scale和translate，确保projection(point)能直接输出正确屏幕坐标：

const zoom = d3.zoom()
  .scaleExtent([1,25])
  .translateExtent([[width * -0.5, height * -0.5], [width * 1.5, height * 1.5]])
  .on('zoom', (ev) => {
    // 根据缩放变换更新投影参数
    projection
      .scale(initialScale * ev.transform.k)
      .translate([
        initialTranslate[0] * ev.transform.k + ev.transform.x,
        initialTranslate[1] * ev.transform.k + ev.transform.y
      ]);
    // 重新渲染地图路径（此时需用路径生成器重新计算d属性）
    svg.selectAll('path').attr('d', pathGenerator);
  });

关键原理说明 #

• 投影scale计算：GeoMercator的初始scale是基准值，缩放后的scale等于初始scale乘以缩放倍数k，因为k是相对初始状态的缩放比例。
• 投影translate计算：初始translate需先乘以k（缩放会改变平移基准），再叠加缩放变换的x、y偏移量，才能正确映射到当前缩放级别下的屏幕位置。

性能优化备选方案 #

若不想重新生成路径（避免性能开销），仍保留修改元素transform的方式，则调用projection(point)时需手动叠加缩放变换：

// 当使用元素transform方式时，计算点坐标需叠加缩放变换
const geoPoint = [-3.3632, 55];
const projectedPoint = projection(geoPoint);
const finalPoint = ev.transform.apply(projectedPoint);
// finalPoint即为正确的屏幕坐标
svg.append("circle")
  .attr("cx", finalPoint[0])
  .attr("cy", finalPoint[1])
  .attr("r", 9)
  .attr("fill", "red");

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