时间戳

首页 > 解决方案 > d3 在 Firefox 中缩放 NaN

javascript - d3 在 Firefox 中缩放 NaN

问题描述

我有一个使用 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) scale(NaN) ”。我确定我遗漏了一些明显的东西。

标签： javascriptd3.jsfirefox

解决方案

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

推荐阅读