时间戳

首页 > 解决方案 > 使用 webpack 导入 d3 模块的语法

javascript - 使用 webpack 导入 d3 模块的语法

问题描述

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

模块中的函数 ( https://github.com/d3/d3-plugins/blob/master/hive/hive.js ) 声明如下：

d3.hive.link = function() {

我阅读了以下内容以尝试使导入正常工作：https ://www.giacommodebidda.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';

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

标签： javascriptd3.jswebpackimport

解决方案

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

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

import * as d3 from 'd3';

然后导入那个将hive对象添加到d3中的插件：

import 'd3-hive';

推荐阅读