Node.js与浏览器下D3导入方法及d3-fetch的fetch报错问题咨询

不同环境的D3导入方式 #

浏览器环境 #

• 全量引入：通过script标签引入D3全量包，全局自动挂载d3对象，可直接调用所有D3方法，适合小型快速开发场景。
• ES Module 按需引入：支持浏览器原生ESM的项目中，可单独引入需要的子模块，减少打包体积，性能更优。

Node.js 环境 #

• CommonJS 规范（默认，package.json未设置"type": "module"）：使用require语法导入，例：const d3 = require('d3')，或按需导入子模块const { csvParse } = require('d3-dsv')
• ES Module 规范：使用import语法导入，需要在package.json中配置"type": "module"，例：import { csvParse } from 'd3-dsv'

fetch is not defined问题原因 #

d3-fetch模块底层依赖浏览器原生的fetchAPI，设计初衷是用于浏览器端请求远程CSV资源。Node.js 18以下版本没有内置全局fetch对象，因此直接调用会抛出引用错误。
Node.js环境读取本地CSV文件不需要使用d3-fetch，该场景下的最优实现是通过内置fs模块读取本地文件，再用d3-dsv的解析方法处理内容，完全避开fetch依赖。

修复后的代码实现 #

方案1：Node.js读本地CSV（推荐） #

1. 安装依赖：

npm install d3-dsv

2. 代码示例：

import { readFileSync } from 'fs'
import { csvParse } from 'd3-dsv'

const path = './data.csv'
// 读取本地文件内容
const fileContent = readFileSync(path, 'utf8')
// 解析CSV为对象数组
const data = csvParse(fileContent)
console.log(data)

方案2：坚持使用d3-fetch的兼容方案 #

如果需要用d3-fetch请求远程CSV资源，可手动补全fetch依赖：

1. 安装依赖（Node.js <18版本需要）：

npm install node-fetch@2 d3-fetch

2. 代码示例：

// 先注入fetch到全局
import fetch from 'node-fetch'
globalThis.fetch = fetch
// 再导入d3-fetch
import { csv } from 'd3-fetch'

// 仅支持请求远程路径，不支持读取本地文件路径
const data = await csv('https://example.com/data.csv')
console.log(data)

内容的提问来源于stack exchange，提问作者Robin Kohrs