不使用d3.drag，实现X轴缩放平移+仅Y轴平移的方法？

嘿，这个需求我之前做类似图表交互时碰到过！D3 Zoom的默认逻辑确实会在缩放时基于鼠标位置同时调整X和Y的平移量，这在常规场景里很合理，但要实现你要的“X可平移缩放、Y仅可手动平移且不受缩放干扰”的效果，就得手动修正Y分量了。

首先得明确核心问题：缩放时D3会自动调整Y平移，是为了让鼠标所在的缩放中心在缩放后位置不变。所以直接用y/k肯定没用——这个调整不是简单的缩放比例，而是和缩放中心的位置绑定的。咱们得针对性抵消这个自动调整。

解决方案思路 #

我们需要维护一个独立的Y平移变量，用来记录用户手动的Y偏移，同时在缩放操作时，计算并抵消D3自动添加的Y平移增量，确保Y值只随用户的平移操作变化。

具体代码实现 #

先初始化几个变量来跟踪状态：

// 容器元素，假设你已经选中了你的SVG容器
const container = d3.select("#your-svg-container");
// 要应用变换的元素（比如g元素）
const g = container.select("g");

// 保存上一次的变换状态，初始为默认的无变换
let lastTransform = d3.zoomIdentity;
// 存储用户手动调整的Y平移量，初始为0
let manualY = 0;

然后编写Zoom事件处理函数，区分缩放和平移操作来修正Y分量：

function zoomed(event) {
  const { transform } = event;
  const sourceEvent = event.sourceEvent;

  if (!sourceEvent) return;

  let finalTransform;
  if (sourceEvent.type === "wheel" || (sourceEvent.type === "mousedown" && sourceEvent.ctrlKey)) {
    // 处理缩放操作：抵消D3自动添加的Y平移增量
    const scaleRatio = transform.k / lastTransform.k;
    // 计算缩放中心相对于容器的Y坐标
    const containerRect = container.node().getBoundingClientRect();
    const zoomCenterY = sourceEvent.clientY - containerRect.top;
    // 计算D3自动添加的Y偏移量
    const autoYShift = (zoomCenterY - lastTransform.y) * (1 - scaleRatio);
    // 修正Y值：用当前transform的Y减去自动偏移，得到不受缩放影响的Y
    const correctedY = transform.y - autoYShift;

    finalTransform = d3.zoomIdentity
      .translate(transform.x, correctedY)
      .scale(transform.k);
  } else if (sourceEvent.type === "mousemove" && sourceEvent.buttons === 1) {
    // 处理平移操作：更新手动Y平移量，X平移直接用transform的值
    manualY += transform.y - lastTransform.y;
    finalTransform = d3.zoomIdentity
      .translate(transform.x, manualY)
      .scale(transform.k);
  } else {
    // 处理双击缩放等其他缩放场景，同样修正Y
    const scaleRatio = transform.k / lastTransform.k;
    const containerRect = container.node().getBoundingClientRect();
    const zoomCenterY = sourceEvent.clientY - containerRect.top;
    const autoYShift = (zoomCenterY - lastTransform.y) * (1 - scaleRatio);
    const correctedY = transform.y - autoYShift;

    finalTransform = d3.zoomIdentity
      .translate(transform.x, correctedY)
      .scale(transform.k);
  }

  // 应用最终变换到元素
  g.attr("transform", finalTransform);
  // 更新上一次变换状态，用于下一次计算
  lastTransform = finalTransform;
}

// 初始化Zoom行为并绑定到容器
const zoom = d3.zoom()
  .scaleExtent([0.5, 3]) // 根据你的需求设置缩放范围
  .on("zoom", zoomed);

container.call(zoom);

为什么y/k没用？ #

再解释下你之前尝试的问题：D3在缩放时的Y平移调整公式是newY = oldY + (zoomCenterY - oldY) * (1 - newK/oldK)，这个调整是基于缩放中心的偏移，不是简单的将Y值除以缩放系数。所以直接用y/k无法抵消这个自动调整，必须结合缩放中心的位置来计算修正量。

这样实现后，你就能得到想要的交互效果：X方向自由平移和缩放，Y方向只能通过拖拽平移，且缩放操作不会改变Y的平移位置。

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