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

Question

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

所以我这样做：

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

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

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

我宁愿写

d3.select()

如何使用 select、min、max 等原型方法保留 d3 名称空间。这样一来，所有 d3 点都是。 d3.select 等..

Answer 1

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

import * as d3 from "d3-selection";

或者因为您只导入 select 和 selectAll

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

Answer 2

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

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

Answer 3

这是一种方法：

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

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