如何在 Jupyter 中本地引用 JavaScript 库？

Question

我想在我的 Jupyter Notebook 中引用 d3 JavaScript 库。 但是，我正在处理的远程节点（在 AWS 中）没有出站 HTTP 访问。 我想我可以下载js文件，将它 SCP 到节点，并在本地引用它（从节点回到自身或本地文件系统）。

我遵循了这里的教程，这篇SO 帖子有点接近我想做的事情（尽管 OP 要求有所不同）。 本教程通过 HTTP 引用了 d3。

如果我简单地修改代码以引用本地 d3 JS 文件，则该示例不再有效。

%%javascript
require.config({
  paths: {
      d3: 'd3.min.js'
  }
});

观察 JavaScript 控制台不会产生任何错误。

关于如何在 Jupyter Notebook 中引用本地 3rd 方 JavaScript 库的任何想法？

Answer 1

本地下载后，您可以执行以下操作：

%%javascript

element.append('<div id="viz"></div>');

require(['d3.min.js'], function(d3){

var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);    

sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});  

});

Answer 2

也许您想通过 jupyter notebook 中的 url 访问本地 javascript 文件？

我发现“/files”路径是一个很好的解决方法，请使用：

require.config({
  paths: {
      d3: '/files/js/d3.min'
  }
});

如果将本地文件保存在 jupyter 服务器根目录的 'js' 目录下。