如何在Node项目中导入D3 v4/v5模块并保留d3.命名空间风格？

其实这个需求我在项目里也碰到过，下面给你梳理几种可行的实现方式：

1. 直接导入整个子模块作为d3对象 #

如果你只需要d3-selection里的功能，用通配符导入整个模块就能让所有方法挂载到d3命名空间下：

import * as d3 from "d3-selection";

// 现在可以直接调用 d3.select('.classname')、d3.selectAll('div')

2. 组合多个d3子模块（适配跨模块方法需求） #

你提到还需要d3.min()、d3.max()这类d3-array模块的功能，可以把多个子模块的方法合并到同一个d3对象里，既保持命名空间统一，又能按需打包：

// 分别导入需要的d3子模块
import * as d3Selection from "d3-selection";
import * as d3Array from "d3-array";

// 合并成统一的d3命名空间对象
const d3 = {
  ...d3Selection,
  ...d3Array
};

// 现在既能用 d3.select('.classname')，也能调用 d3.min([1,2,3])、d3.max([4,5,6])

3. 直接导入完整d3库（适合大量使用d3功能的场景） #

如果你的项目需要用到d3的大部分功能，直接导入完整库会更省事，所有方法天然就在d3命名空间下：

import * as d3 from "d3";

// 所有d3方法都可以通过d3.xxx调用，比如d3.select()、d3.min()、d3.scaleLinear()等

不过这种方式会打包整个d3库，如果只用到少量功能，可能会增加不必要的体积，按需导入子模块会更优。

补充说明 #

你原来用import {select, selectAll} from "d3-selection"的写法是解构导入，只会把指定方法单独提取出来，并没有关联到d3对象上，所以没法用d3.select()的方式调用。上面的几种方法都是通过将模块内容挂载到d3对象上，实现了你想要的命名空间调用方式。

内容的提问来源于stack exchange，提问作者Union find