D3 zoom在Firefox浏览器触发滚轮缩放时返回NaN值问题求助

• 核心是Firefox浏览器对无明确尺寸的SVG元素的clientWidth、clientHeight属性返回值和Chrome不一致：当页面中只有SVG元素、且未给SVG显式设置宽高时，Firefox会返回0，Chrome则会返回SVG实际渲染的宽高。
• d3-zoom的滚轮缩放逻辑内部依赖绑定元素的宽高计算缩放参考点，用0做除数计算就会得到NaN值，最终生成translate(NaN,NaN) scale(NaN)的错误变换值。
• CodeSandbox分屏视图下预览页嵌套在iframe中，iframe会给内部页面默认施加布局约束，SVG能拿到有效的宽高值，所以功能正常；单独打开预览页时失去了上层布局约束，就触发了Firefox的异常返回值问题。

可选两种方案修复：

1. 给绑定zoom事件的SVG元素显式设置宽高，可通过标签属性或者CSS设置，示例：

<!-- 方式1：设置标签属性 -->
<svg width="100vw" height="100vh" viewBox="0 0 800 600">
  <g>
    <!-- 图形内容 -->
  </g>
</svg>

<!-- 方式2：CSS设置 -->
<style>
svg {
  width: 100%;
  height: 100vh;
}
</style>

2. 手动指定d3-zoom的计算范围，不依赖元素的clientWidth/clientHeight获取值，修改JS代码如下：

import { zoom } from "d3-zoom";
import { select } from "d3";

select("svg").call(
  zoom()
    // 手动指定缩放的范围，这里取视口宽高，可根据业务场景调整为实际容器尺寸
    .extent([[0, 0], [window.innerWidth, window.innerHeight]])
    .on("zoom", (event) => {
      console.log(`Transform: ${event.transform.toString()}`);
      select("g").attr("transform", event.transform.toString());
    })
);

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