javascript - zoom.js 函数超出了 D3js 最大调用堆栈

Question

我一直在尝试使用 D3js，并在尝试通过以编程方式调用 zoomEvent 来实现多缩放行为时遇到“超出最大调用堆栈”消息。我制作了一个简单的 jsFiddle 程序来演示这个问题。下面是一个最小的可重现代码。

const svg = d3.select("svg");
svg.attr("class", "rootSvg").attr("width", 300).attr("height", 300);

const redRect = svg
  .append("rect")
  .attr("height", 300)
  .attr("width", 150)
  .attr("fill", "red");

const blueRect = svg
  .append("rect")
  .attr("height", 300)
  .attr("width", 150)
  .attr("fill", "blue")
  .attr("x", 150);

const redRectZoomBH = d3.zoom();
const blueRectZoomBH = d3.zoom();

const zoomRedRect = ({ sourceEvent }) => {
  if (sourceEvent === null) return; //<-------- This check doesnt work??
  console.log("zooming red with red zoom function");
  redRect.call(redRectZoomBH.transform, d3.zoomIdentity);
};

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

redRect.call(redRectZoomBH.on("zoom", zoomRedRect));
blueRect.call(blueRectZoomBH.on("zoom", zoomBlueRect));

https://jsfiddle.net/SkySoft2/5ywzuaq2/3/

该程序显示一个红色和蓝色的矩形。放大蓝色将以编程方式调用红色的 zoomEvent，缩放红色矩形将调用红色的 zoomEvent。在 red 和 blue 的缩放功能中，在调用触发 zoomEvent 之前会检查 sourceEvent 是否有效。

问题是在缩放蓝色矩形时触发红色的zoomEvent，sourceEvent为null，不会出现无限循环。但是缩放红色并触发红色的 zoomEvent 会导致无限循环，因为 sourceEvent 不是 null 而是合法的 wheelEvent。

谁能告诉我为什么会发生这种情况，有没有办法检查 zoomEvent 是否以编程方式触发或由合法的 wheelEvent 触发

标签： javascriptd3.js