如何在无外网的Jupyter Notebook中本地引用d3 JavaScript库

我之前也碰到过一模一样的情况——AWS节点没外网权限，只能靠本地JS库跑可视化，一开始用require.config也踩了坑，后来摸索出几个靠谱的解决方法，分享给你：

第一步：先把文件位置搞对 #

首先得确认你的Jupyter Notebook当前的工作目录，不然路径写得再对都是白搭。在代码单元格里跑这段Python代码：

import os
print(os.getcwd())

把你SCP上来的d3.min.js放到这个输出的目录里（嫌乱的话也可以建个js/子目录专门放JS文件，记得后面路径对应上就行）。可以用!ls命令验证文件是否存在：

!ls | grep d3.min.js

如果能看到文件名，说明文件位置没问题。

方法一：用require.js正确加载（推荐） #

你之前的代码只配置了路径，但没实际加载并调用d3，而且路径写法可以更严谨一点。试试在JavaScript单元格里写这段代码：

%%javascript
// 配置require路径，注意可以省略.js后缀，require会自动补全
require.config({
  paths: {
    d3: './d3.min'  // 如果放在js子目录里就写成'./js/d3.min'
  }
});

// 实际加载d3并在回调里使用
require(['d3'], function(d3) {
  // 先在控制台打印版本，确认加载成功
  console.log("D3加载成功！版本：", d3.version);
  
  // 举个简单的测试例子，创建一个红色圆形
  var svg = d3.select("body")
              .append("svg")
              .attr("width", 200)
              .attr("height", 200);
  
  svg.append("circle")
     .attr("cx", 100)
     .attr("cy", 100)
     .attr("r", 50)
     .style("fill", "firebrick");
});

运行这个单元格后，打开浏览器控制台（F12），如果能看到版本号，而且页面上出现红色圆形，就说明成功了。

方法二：直接插入script标签（更直观） #

如果require.js的配置还是有问题，或者你不想折腾它，可以直接手动创建script标签加载本地文件，这种方式绕开了require的配置逻辑，更直接：

%%javascript
// 创建script元素
var script = document.createElement('script');
// 设置src为本地文件路径，对应你的实际位置
script.src = './d3.min.js';
// 加载完成后执行回调
script.onload = function() {
  console.log("D3通过script标签加载成功！版本：", d3.version);
  // 这里写你的d3业务代码
  var svg = d3.select("body")
              .append("svg")
              .attr("width", 200)
              .attr("height", 200);
  
  svg.append("rect")
     .attr("x", 50)
     .attr("y", 50)
     .attr("width", 100)
     .attr("height", 100)
     .style("fill", "steelblue");
};
// 把script标签加到页面头部
document.head.appendChild(script);

常见问题排查 #

• 404错误：如果浏览器Network标签里显示d3.min.js请求失败（状态码404），说明路径写错了。检查文件是否在你指定的路径下，或者调整路径写法（比如加不加./）。
• 缓存问题：有时候浏览器会缓存旧的资源，导致新文件没加载，试试按Ctrl+F5强制刷新页面。
• 全局复用配置：如果你想让所有Notebook都能引用这个库，可以创建~/.jupyter/custom/目录，把d3.min.js放进去，然后重启Jupyter服务，之后路径可以写成'/static/custom/d3.min'，不用每次都在Notebook里配置。

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