d3 zoom NaN 在 Firefox 中

d3 zoom NaN in Firefox

我有一个使用 d3 zoom 的应用程序,它在 Chrome 中有效,但(对我而言)在 Firefox 中无效。我将缩放问题归结为以下非常简单的示例:

https://codesandbox.io/s/d3-zoom-error-in-firefox-mzid3

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

select("svg").call(
  zoom().on("zoom", (event) => {
    console.log(`Transform: ${event.transform.toString()}`);

    select("g").attr("transform", event.transform.toString());
  })
);

我在 Firefox 的 Code Sandbox 默认拆分视图中使用灰色方块进行滚轮缩放,但当我在新选项卡中打开浏览器预览并尝试时,控制台记录转换值“translate(NaN,NaN ) 比例 (NaN)"。我确定我遗漏了一些明显的东西。

原来这是由我安装的扩展引起的:https://addons.mozilla.org/en-US/firefox/addon/logitechsmoothscrolling/。 Georgy 指出该演示对他们有效,这让我更仔细地查看了我的特定 Firefox 配置文件。由于该扩展程序已有 4 年历史,没有它滚动看起来非常流畅,我对删除扩展程序感到满意。