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

Question

我有一个代码，我正在导入（es6import语句）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-to-ES5 bundler，请注意 d3.event 的值会发生变化活动期间！d3.event 的导入必须是实时绑定，因此您可能需要将捆绑器配置为从 D3 的 ES6 模块导入，而不是从生成的 UMD 包中导入；并非所有打包器都遵守 jsnext:main。还要注意与 window.event 全局的冲突。

我正在使用 babel（用于 ie11 支持）和 webpack 进行捆绑。这个笔记是什么意思？为什么不喜欢import {event as d3event} from'd3-selection';跟随let d3 = Object.assign({}, d3selection, d3transition, d3event};工作？

Answer 1

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 // or d3 = {event}仍将返回分配时观察到的 null 事件；请参阅Mike Bostock 获取当前事件的方法以获取解决方案。

d3.event 注释现在包含一个链接，该链接指向实时绑​​定的解释：对d3-selection.

一个额外的警告花费了我一些时间：如果d3-drag指向与d3-select其他工具不同的版本，d3.select(/**/).call(d3.drag(/**/))则不起作用，因为事件永远不会到达event正在使用的变量d3.drag。在某个地方d3@^5，主包不再固定d3-selection版本，从而允许这种不匹配。