d3-xyzoom:与webpack一起使用时，滚动(滚轮)缩放抛出"d3-xyzoom.js:83未捕获按钮:无法读取null的属性‘TypeError’“

Question

我和webpack一起使用D3V4，当我使用图表上的滚轮时，d3-xyzoom抛出了d3-xyzoom.js:83 Uncaught TypeError: Cannot read property 'button' of null。

以下是代码的导入部分：

import $ from 'jquery';
import 'bootstrap';
import 'popper.js';
import '../../theme/bootstrap-enisyst.scss';
import 'jquery-ui';
import 'jquery-blockui';
import 'jquery-widget';
import 'jquery-mousewheel';
import d3Tip from "d3-tip";
import * as Papa from 'papaparse';
import * as d3 from 'd3';
import * as d3ScaleChromatic from 'd3-scale-chromatic';
import * as d3xyzoom from 'd3-xyzoom';
import { interpolate } from 'd3-interpolate';
import 'html2canvas';
import log from 'loglevel';
import './eniChartCommon.css';
import './styleEniChart.css';

Object.assign(d3, d3xyzoom);
Object.assign(d3, d3ScaleChromatic);
Object.assign(d3, interpolate);

以下是我的package.json依赖项部分：

"dependencies": {
   "@fortawesome/fontawesome-svg-core": "^1.2.32",
   "@fortawesome/free-brands-svg-icons": "^5.15.1",
   "@fortawesome/pro-light-svg-icons": "^5.15.1",
   "@fortawesome/pro-regular-svg-icons": "^5.15.1",
   "@fortawesome/pro-solid-svg-icons": "^5.15.1",
   "@octokit/rest": "^18.0.9",
   "bootstrap": "^4.5.3",
   "bootstrap-table": "^1.18.0",
   "bowser": "^2.11.0",
   "d3": "4.2.2",
   "d3-interpolate": "^2.0.1",
   "d3-scale-chromatic": "^2.0.0",
   "d3-tip": "^0.9.1",
   "d3-transition": "^2.0.0",
   "d3-xyzoom": "^1.5.0",
   "diff": "^4.0.2",
   "diff2html": "^3.1.15",
   "fs": "0.0.1-security",
   "github-markdown-css": "^4.0.0",
   "html2canvas": "^1.0.0-rc.7",
   "jquery": "^3.5.1",
   "jquery-blockui": "^2.7.0",
   "jquery-mousewheel": "^3.1.13",
   "jquery-ui": "^1.12.1",
   "jquery-widget": "^0.1.8",
   "js-cookie": "^2.2.1",
   "jsx": "^0.9.89",
   "leaflet": "^1.7.1",
   "leaflet-easybutton": "^2.4.0",
   "leaflet-fullscreen": "^1.0.2",
   "leaflet-zoombox": "^0.5.1",
   "license-checker": "^25.0.1",
   "loglevel": "^1.7.0",
   "offline-js": "^0.7.19",
   "papaparse": "^5.3.0",
   "popper.js": "^1.16.1"
 }

d3-xyzoom.js:83 is

  // Ignore right-click, since that should open the context menu.
  function defaultFilter() {
    return !d3Selection.event.button;
  }

我已经尝试了几个版本的d3-zoom，认为可能会解决这个问题，但将d3-zoom作为单独的m模块添加总是会导致更多的问题。我已经尝试了d3-xyzoom的几个版本，但都没有成功。我知道这是一个导入问题，但我不知道正确的导入组合才能在滚动上缩放

Answer 1

Since version 4，d3.js具有微包的结构，以实现模块化。如果你安装了1.x，你会得到一切，但你也可以挑挑拣拣。关于这些微包的版本控制，我相当确定0.x对应于v4，1.x对应于v5，2.x对应于新发布的d3 v6。

这意味着您已经将用于d3 v6的包与用于d3 v4的包一起安装。具体地说，是d3-interpolate、d3-transition和d3-scale-chromatic。考虑将它们降级或一起删除，因为它们应该包含在常规的d3包中。

In d3 v6，发布了一个巨大的变化；d3.event被删除了。它改变了一些事情，这些事情在this answer中得到了很好的解决。这可能就是你的代码失败的原因。

简而言之，d3-transition或其他一些软件包需要d3-selection，它会将已安装的d3-selection版本覆盖到不再支持d3.event的版本。d3-xyzoom仍然希望d3.event能够存在。删除这些程序包应该可以解决此问题。