Javascript d3 xyzoom：滚动（滚轮）缩放投掷“；d3 xyzoom.js:83未捕获类型错误：无法读取属性'；按钮'；“无效”的定义；与webpack一起使用时
我正在使用D3V4和网页包，d3 xyzoom正在抛出Javascript d3 xyzoom：滚动（滚轮）缩放投掷“；d3 xyzoom.js:83未捕获类型错误：无法读取属性'；按钮'；“无效”的定义；与webpack一起使用时,javascript,d3.js,webpack,zooming,Javascript,D3.js,Webpack,Zooming,我正在使用D3V4和网页包，d3 xyzoom正在抛出 d3 xyzoom.js:83未捕获类型错误：当我使用图表上的控制盘时，无法读取null的属性“button” 以下是代码的导入部分： import $ from 'jquery'; import 'bootstrap'; import 'popper.js'; import '../../theme/bootstrap-enisyst.scss'; import 'jquery-ui'; import 'jquery-blockui';
d3 xyzoom.js:83未捕获类型错误：当我使用图表上的控制盘时，无法读取null的属性“button”
以下是代码的导入部分：
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);
以下是my 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是
// Ignore right-click, since that should open the context menu.
function defaultFilter() {
return !d3Selection.event.button;
}
我尝试了几个版本的d3 zoom
认为可以解决这个问题，但是添加d3 zoom
作为一个单独的m模块总是会导致更多的问题。我尝试过d3 xyzoom的几个版本，但没有成功。我知道这是一个导入问题，但我不知道正确的导入组合，以便zoom on scroll工作，d3.js有一个微包结构，用于模块化。如果您安装了d3，您将获得所有信息，但您也可以选择。关于这些微型软件包的版本控制，我相当确信0.x
对应于v4，1.x
对应于v5，2.x
对应于新发布的d3 v6
这意味着您在安装d3 v4包的同时，还安装了适用于d3 v6的包。具体来说，d3插值
，d3过渡
，以及d3音阶色度
。考虑将这些降级或删除它们一起，因为它们应该包含在规则<代码> D3包中。
发布了一个巨大的变化<代码>d3。已删除事件d3。事件