javascript – d3.event在组合模块时不起作用

2024年2月5日 429次阅读

我有一个代码,我正在导入(es6 import语句)d3-selection和d3-transition.但是我还需要捕获事件.当我不导入d3-transition时,d3.events完美运行.一旦我导入d3-transition,我就会收到一条错误,指出d3.event为null并且不能引用事件属性.

D3 API参考中有一个注释.

https://github.com/d3/d3-selection/blob/master/README.md#event：
如果您使用Babel,Webpack或其他ES6到ES5捆绑器,请注意d3.event的值在事件期间会发生变化！导入d3.event必须是实时绑定,因此您可能需要将捆绑程序配置为从D3的ES6模块而不是从生成的UMD包导入;并非所有捆绑商都观察到jsnext：main.还要注意与window.event全局的冲突.

我正在使用babel(支持ie11)和webpack进行捆绑.这个音符是什么意思？为什么不能从’left-selection’中导入{event as d3event};然后让d3 = Object.assign({},d3selection,d3transition,d3event};工作？

最佳答案

import {event as d3event} from'd3-selection'
d3event === null // true; `event`'s value changes later with user input.
let d3 = Object.assign({}, d3selection, d3transition, d3event)
// won't have an `event` property since Object.assign({}, null) -> {}

添加d3.event = event //或d3 = {event}仍将返回在赋值时观察到的null事件;请参阅Mike Bostock’s method of getting the current event以获得解决方案.

The d3.event note现在包含a link,解释实时绑定的含义：对d3选择中的变量的引用.

另一个需要花费一些时间的警告：如果d3-drag指向不同版本的d3-select而不是其他工具,则d3.select(/ ** /).call(d3.drag(/ ** /))将无法工作,因为事件永远不会到达d3.drag正在使用的事件变量.在d3 @ ^ 5附近,主程序包不再固定d3选择版本,允许这种不匹配.

点赞