使用 webpack 导入 d3 模块的语法答案

【问题标题】：Syntax to import a d3 module using webpack使用 webpack 导入 d3 模块的语法
【发布时间】：2020-02-20 10:47:16
【问题描述】：

我正在尝试导入和使用 d3 模块。我的项目使用 webpack。

d3.hive.link = function() {

我阅读了以下内容以尝试使导入工作：https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ 但我似乎无法破解正确的语法来导入和调用链接函数。

我尝试过的一些变体是：

import {link as hiveLink} from 'd3-hive';
import {hive as hiveLink} from 'd3-hive';
import * as hiveLink from 'd3-hive';

有人可以指出正确的导入语法吗？

【问题讨论】：

【解决方案1】：

您要导入的插件不是 ES6 模块。它与 D3 v4 不兼容（请参阅README.md）。所以它只是修改了你的全局 d3 变量。虽然您引用的文章是关于 D3 v4 的，但它并不是这样工作的。

我认为可以导入 d3 库（版本 3），它将初始化您的全局 d3：

import * as d3 from 'd3';

然后导入该插件，该插件会将 hive 对象添加到 d3：

import 'd3-hive';

【讨论】：