如何用原生JavaScript替代Node.js的require()加载D3相关包？

没问题，我来一步步教你把Node.js环境下的require()加载改成原生浏览器端的方式，完全不需要npm或者Node.js：

1. 准备好各个库的本地文件 #

你已经搞定了d3-sankey，剩下两个库也用同样的方式处理：

• D3核心库：下载对应版本的完整UMD格式d3.js文件，保存到项目根目录（和你的d3-sankey.js放在一起）。
• Google DSCC库：下载@google/dscc的UMD格式文件，同样保存到项目根目录。

2. 在HTML中通过<script>标签引入 #

注意引入顺序很重要，因为d3-sankey依赖D3，所以要先加载D3，再加载d3-sankey，最后加载DSCC。在你的HTML文件里添加这些标签：

<!-- 先加载D3核心库 -->
<script src="./d3.js"></script>
<!-- 再加载d3-sankey（它会自动挂载到全局的d3对象上） -->
<script src="./d3-sankey.js"></script>
<!-- 最后加载Google DSCC库 -->
<script src="./dscc.js"></script>

3. 替换原来的require代码 #

原来的Node.js风格代码：

const d3 = require('d3');
const d3Sankey = require('d3-sankey');
const dscc = require('@google/dscc');

现在改成直接使用全局变量：

// D3和d3-sankey的方法都直接挂载在全局d3对象上
const sankey = d3.sankey()
  .nodeWidth(20)
  .nodePadding(15);

// DSCC的方法直接使用全局的dscc对象
dscc.subscribeToData((data) => {
  // 这里写你的可视化逻辑，比如处理数据、生成桑基图
});

几个关键注意点 #

• 别搞反脚本引入顺序，否则会出现“找不到d3”之类的报错。
• 如果下载的是.min.js压缩版，直接替换成对应的文件名就行，功能完全一致。
• 测试时直接在浏览器打开HTML文件即可，如果遇到跨域问题（比如加载本地数据文件），可以启动一个简单的本地服务器，比如运行python -m http.server（需要Python环境），然后访问http://localhost:8000。

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