如何实现D3.js仅X轴缩放、双轴平移的Canvas图表？

哈哈，这个问题我之前做Canvas版D3图表时也碰到过！核心就是把Y轴的缩放完全禁用，只保留平移；同时让X轴正常响应缩放和平移。结合你现有的代码，修改起来很简单，咱们一步步来：

首先要明确前提：你必须在初始化时就保存好初始比例尺的副本x2和y2（这步很关键，不能在zoom事件里临时创建），比如：

// 初始化你的X/Y比例尺（根据你的实际场景调整domain和range）
const xScale = d3.scaleLinear().domain([0, 100]).range([0, canvasWidth]);
const yScale = d3.scaleLinear().domain([0, 100]).range([canvasHeight, 0]); // Canvas Y轴向下，range要反过来

// 保存初始比例尺的副本，用于后续rescale计算
const x2 = xScale.copy();
const y2 = yScale.copy();

接下来修改你的zoom事件处理逻辑：

const zoomBehavior = d3.zoom()
  // 可选：限制X轴的缩放范围，防止缩放太极端
  .scaleExtent([0.3, 10])
  .on('zoom', () => {
    const t = d3.event.transform;

    // 1. X轴正常应用缩放+平移：和你原来的逻辑一致
    xScale.domain(t.rescaleX(x2).domain());

    // 2. Y轴只保留平移，禁用缩放：创建一个缩放因子为1的transform来处理
    const yOnlyPanTransform = d3.zoomIdentity
      .translate(t.tx, t.ty) // 保留XY方向的平移量
      .scale(1); // 强制Y轴缩放因子为1，完全禁用缩放效果

    // 用这个修改后的transform更新Y轴domain，只会响应平移操作
    yScale.domain(yOnlyPanTransform.rescaleY(y2).domain());

    // 重新渲染Canvas内容
    render();
  });

为什么这么改？ #

• 对X轴：我们用完整的zoom变换（包含缩放和平移）做rescale，所以X轴会正常响应缩放+平移，和你原来的逻辑一致。
• 对Y轴：我们手动创建了一个缩放因子为1的变换，只保留平移参数。这样rescaleY只会计算平移对Y轴domain的影响，完全忽略缩放的作用，完美实现了Y轴只能平移不能缩放的效果。

你提到的示例里的deltaPanY，其实D3的rescaleY已经帮我们自动处理了——它会把Canvas上的像素平移量，自动转换为Y轴域值的变化，不需要手动计算像素和域值的映射关系，省心很多！

额外小提示 #

如果需要限制Y轴的平移范围（比如不能把图表移出画布），可以在更新Y轴domain后加个限制逻辑：

const [newYMin, newYMax] = yOnlyPanTransform.rescaleY(y2).domain();
// 假设你不想让Y轴超出初始的域范围[0,100]
const clampedYMin = Math.max(y2.domain()[0], newYMin);
const clampedYMax = Math.min(y2.domain()[1], newYMax);
yScale.domain([clampedYMin, clampedYMax]);

最后别忘了把zoom行为绑定到你的Canvas元素上：

d3.select(yourCanvasElement).call(zoomBehavior);

这样改完之后，你的Canvas图表就会和示例效果一致：只能沿着X轴缩放，但可以在XY两个方向自由平移啦！

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