如何通过代码实现D3.js缩放并获取正确的translate值

核心思路是完全依赖D3 Zoom的官方API管理变换状态，避免手动修改transform属性，同时利用scaleBy方法自动计算缩放后的平移值，保证缩放时视口中心内容不偏移。

步骤1：初始化Zoom（基础代码） #

先确保你的基础Zoom配置正确，所有变换都通过Zoom事件更新：

const svg = d3.select("svg");
const panGroup = svg.select("#pan-group"); // 你的平移缩放目标组

// 初始化Zoom行为
const svgZoom = d3.zoom()
  .scaleExtent([0.1, 10]) // 限制缩放范围，可根据需求调整
  .on("zoom", (event) => {
    // 仅在Zoom事件中更新transform，保证状态同步
    panGroup.attr("transform", event.transform);
  });

// 将Zoom绑定到SVG容器
svg.call(svgZoom);

步骤2：实现按钮缩放逻辑 #

写一个通用的缩放函数，基于当前视口中心进行缩放，自动处理平移计算：

// factor为缩放倍数：>1是放大，<1是缩小
function zoomBy(factor) {
  // 1. 获取当前的Zoom变换状态（无需手动解析transform）
  const currentTransform = d3.zoomTransform(panGroup.node());
  
  // 2. 计算SVG视口的中心坐标（相对于SVG容器）
  const viewportCenter = [
    svg.node().clientWidth / 2,
    svg.node().clientHeight / 2
  ];
  
  // 3. 计算基于中心缩放后的新变换
  // scaleBy会自动调整translate，保证指定位置（这里是视口中心）的内容在缩放后位置不变
  const newTransform = currentTransform.scaleBy(viewportCenter, factor);
  
  // 4. 应用新变换，同步Zoom内部状态和DOM
  svg.call(svgZoom.transform, newTransform);
}

// 绑定按钮点击事件
d3.select("#zoom-in").on("click", () => zoomBy(1.2));
d3.select("#zoom-out").on("click", () => zoomBy(0.8));

解决你遇到的核心问题 #

1. 状态不同步问题：所有变换都通过svgZoom.transform方法应用，D3 Zoom的内部状态会自动与DOM的transform属性同步，后续鼠标平移/缩放不会跳回之前的状态。
2. 非中心缩放的平移计算：scaleBy方法会基于你传入的位置（这里是视口中心）自动计算缩放后的translate值，无需手动推导复杂的坐标转换公式。

可选调整 #

如果需要以鼠标当前位置为中心缩放（而非视口中心），可以把viewportCenter替换为鼠标位置：

// 比如在按钮点击时获取鼠标位置（注意：按钮点击的event是鼠标事件）
function zoomByWithMouse(factor, event) {
  const currentTransform = d3.zoomTransform(panGroup.node());
  const mousePos = d3.pointer(event, svg.node());
  const newTransform = currentTransform.scaleBy(mousePos, factor);
  svg.call(svgZoom.transform, newTransform);
}

// 绑定按钮时传入event
d3.select("#zoom-in").on("click", (event) => zoomByWithMouse(1.2, event));

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