D3.js调用zoomEvent触发Maximum call stack exceeded问题求助

咱们先来理清楚你遇到的问题核心，以及为什么会出现这种差异：

问题原因分析 #

你遇到的栈溢出，本质是递归触发zoom事件导致的。为什么缩放蓝色矩形时没问题，但缩放红色就会无限循环？

• 当你在蓝色矩形的zoom回调里触发红色矩形的zoom变换时，D3会生成一个全新的、程序化的zoom事件，这个事件的sourceEvent是null，所以你的检查if (sourceEvent === null) return会直接生效，终止后续逻辑，不会循环。
• 但当你在红色矩形的zoom回调里调用同一个zoom行为的.transform()方法时，D3在内部可能会复用当前的事件上下文——也就是说，新触发的zoom事件的sourceEvent并没有被置为null，而是保留了原用户交互的WheelEvent。这就导致你的检查失效，回调会反复执行.transform()，最终引发栈溢出。

（补充：也有可能是因为你每次调用.transform(zoomIdentity)时，即使当前已经是这个状态，D3依然会触发zoom事件，而同步调用导致递归无法终止。）

解决方案：准确区分程序化与用户触发的Zoom事件 #

要彻底解决这个问题，我们需要可靠地区分“用户交互触发的zoom”和“代码程序化触发的zoom”，这里给你三个实用方法：

方法1：自定义sourceEvent标记（最直观） #

在程序化触发zoom时，手动传入一个带标记的自定义sourceEvent，这样就能在回调里精准识别：

const zoomRedRect = ({ sourceEvent }) => {
  // 检查是否是程序化触发的标记
  if (sourceEvent?.isProgrammatic) return;
  
  console.log("zooming red with red zoom function");
  // 触发时传入自定义标记
  redRect.call(redRectZoomBH.transform, d3.zoomIdentity, { isProgrammatic: true });
};

const zoomBlueRect = ({ sourceEvent }) => {
  if (sourceEvent?.isProgrammatic) return;
  
  console.log("zooming red with blue zoom function");
  redRect.call(redRectZoomBH.transform, d3.zoomIdentity, { isProgrammatic: true });
};

用户交互触发的sourceEvent是原生的WheelEvent，没有我们自定义的isProgrammatic属性；而代码触发的事件会携带这个标记，直接终止回调逻辑。

方法2：用状态变量控制递归 #

通过一个闭包内的变量标记当前是否正在执行程序化zoom，避免递归调用：

// 闭包内的状态变量，外部无法修改
let isProgrammaticZoom = false;

const zoomRedRect = ({ sourceEvent }) => {
  if (isProgrammaticZoom) return;
  
  console.log("zooming red with red zoom function");
  isProgrammaticZoom = true;
  redRect.call(redRectZoomBH.transform, d3.zoomIdentity);
  isProgrammaticZoom = false;
};

在执行程序化zoom前把标记设为true，执行完成后重置，这样回调里检测到标记就会直接返回，不会继续递归。

方法3：只在需要时更新变换 #

如果你的需求是把红色矩形重置为初始缩放状态，可以先检查当前变换是否已经是zoomIdentity，只有不同时才触发更新：

const zoomRedRect = ({ sourceEvent, transform }) => {
  if (sourceEvent === null) return;
  
  // 检查当前是否已经是初始状态
  if (transform.k === 1 && transform.x === 0 && transform.y === 0) return;
  
  console.log("zooming red with red zoom function");
  redRect.call(redRectZoomBH.transform, d3.zoomIdentity);
};

这样就避免了不必要的zoom事件触发，从根源上消除循环的可能。

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