d3.js - Updating d3 to v6.3.1 & Angular to v11.0.6: ERROR - event was not found in d3

Question

After updating d3 to v6.3.1 and Angular to latest v11.0.6, getting the following error while doing ng build --prod. Earlier with d3 v5.4.0 and Angular v6.0.3, everything was working fine.

Error while ng build --prod:

"export 'event' was not found in 'd3'
    at HarmonyImportSpecifierDependency._getErrors (<application-path>
ode_moduleswebpacklibdependenciesHarmonyImportSpecifierDependency.js:109:11)
    at HarmonyImportSpecifierDependency.getErrors (<application-path>
ode_moduleswebpacklibdependenciesHarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (<application-path>
ode_moduleswebpacklibCompilation.js:1463:22)
    at hooks.finishModules.callAsync.err (<application-path>
ode_moduleswebpacklibCompilation.js:1258:10)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (<application-path>
ode_moduleswebpack
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:53:1)
    at AsyncSeriesHook.lazyCompileHook (<application-path>
ode_moduleswebpack
ode_modulesapablelibHook.js:154:20)
    at Compilation.finish (<application-path>
ode_moduleswebpacklibCompilation.js:1253:28)
    at hooks.make.callAsync.err (<application-path>
ode_moduleswebpacklibCompiler.js:672:17)
    at _done (eval at create (<application-path>
ode_moduleswebpack
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:9:1)
    at _err1 (eval at create (<application-path>
ode_moduleswebpack
ode_modulesapablelibHookCodeFactory.js:33:10), <anonymous>:36:22)
    at _addModuleChain (<application-path>
ode_moduleswebpacklibCompilation.js:1185:12)
    at processModuleDependencies.err (<application-path>
ode_moduleswebpacklibCompilation.js:1097:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts

It seems that event is being referred from the following code:

import * as d3 from 'd3';
// Save x,y cordinates on drag start.
this.originalX = d3.event.x;
this.originalY = d3.event.y;
d3.event.sourceEvent.stopPropagation();

After googling a bit, someone suggested to install @types/d3 and then try; but after installing it, Webstorm starts to throw error on the usage of d3.event.

Has the API changed for accessing event via d3? Or something else is missing?

Answer 1

等待大神答复