为何D3.js的event.transform.rescaleY(yScale)在滚轮与鼠标缩放时表现不同？

问题根源在于D3的zoom事件默认会同时处理X、Y轴的变换，但你仅需Y轴缩放。鼠标拖拽触发的transform包含了X轴的偏移/缩放参数，导致rescaleY计算出的domain出现跳变；而滚轮事件的transform默认X轴参数为初始状态（k=1、x=0），因此表现正常。

解决方案 #

在zoom函数中重置X轴变换参数，仅保留Y轴的缩放与偏移，确保计算完全基于Y轴：

import { zoomIdentity } from "d3-zoom";

function zoom(event: any) {
  // 构建仅保留Y轴变换的transform对象，重置X轴偏移为0
  const yOnlyTransform = zoomIdentity
    .scale(event.transform.k)
    .translate(0, event.transform.y);

  const new_yScale = yOnlyTransform.rescaleY(yScale);

  setMinY(new_yScale.domain()[0]);
  setMaxY(new_yScale.domain()[1]);

  // 可选：同步更新SVG的transform状态，避免累积X轴变换错误
  d3.select(svgRef.current!).call(
    zoomBehavior.transform,
    yOnlyTransform
  );
}

额外可通过事件过滤，限制仅处理Y轴相关操作：

const zoomBehavior = d3.zoom()
  .scaleExtent([0.5, 5]) // 限制缩放范围
  .filter((event) => {
    // 允许滚轮事件，鼠标拖拽仅响应垂直方向操作
    if (event.type === "wheel") return true;
    return Math.abs(event.dy) > Math.abs(event.dx);
  })
  .on("zoom", zoom);

说明 #

1. 重置X轴变换：通过zoomIdentity创建初始变换，只保留Y轴的缩放比例k和偏移y，X轴偏移设为0，消除X轴参数对rescaleY的干扰。
2. 同步SVG状态：可选步骤，确保SVG的变换状态与计算逻辑一致，防止后续事件累积错误的X轴参数。
3. 事件过滤：避免误触X轴操作，进一步强化Y轴专属缩放的交互逻辑。

修改后鼠标拖拽缩放的初始阶段将不再跳变，表现与滚轮缩放一致。

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