如何将 d3 v4 / v5 模块导入 Node 项目但保持 D3 v3 命名空间样式 (d3.)？ [复制]答案

【问题标题】：How to import a d3 v4 / v5 module into a Node project but keep the D3 v3 namespace style (d3.)? [duplicate]如何将 d3 v4 / v5 模块导入 Node 项目但保持 D3 v3 命名空间样式 (d3.)？ [复制]
【发布时间】：2019-04-06 21:56:28
【问题描述】：

我想将 d3.selection es6 模块导入到与 rollup 捆绑的项目中（包括 common.js 插件）。

所以我这样做：

import {select, selectAll} from "d3-selection";

但现在我必须写 d3.. 就像它是其他语言一样。

select('.classname').. etc..

我宁愿写

d3.select()

如何使用 select、min、max 等原型方法来保留 d3 命名空间。那样的话，它就是 d3 dot 什么的。 d3.select 等。

【问题讨论】：

标签： node.js d3.js webpack es6-modules rollupjs

【解决方案1】：

这是一种方法：

import {select, selectAll} from 'd3-selection';
import {scaleOrdinal, scaleLinear} from 'd3-scale';
// etc.

const d3 = {select, selectAll, scaleOrdinal, scaleLinear}
//
const svg = d3.select('svg');

【讨论】：

【解决方案2】：

从mdn docs 开始，您将无法将两者放在同一个命名空间中，您可以做的是

import * as d3 from "d3-selection";

或者因为你只是导入 select 和 selectAll

import {select as d3.select, selectAll as D3.selectAll} from "d3-selection";

【讨论】：

但是如果我导入 d3-array... 比如 import {min as d3.min} from "d3-array";这不会引起冲突吗？命名空间是如此破碎:(
会的。是的，希望您可以在同一个命名空间下有多个导入。您也可以创建一个仅包含您想要的方面的自定义 D3 捆绑包，然后将其导入。
这似乎是 Mike 的建议，但.. 与代码的编写方式并不完全一致。
我同意。不幸的是，他们决定改变我们坚持创建自己的捆绑包的标准。
当我尝试这个时，我得到Unexpected token, expected "," d3.select

【解决方案3】：

我了解到一种方法是使用 d3-require 创建命名空间，然后作为模块导出。

d3.require("d3-array", "d3-color").then(d3 => {
  console.log(d3.range(360).map(h => d3.hsl(h, 1, 0.5)));
});

【讨论】：