如何在 Ipython 笔记本中添加外部 javascript 文件答案

【问题标题】：How to add external javascript file in Ipython notebook如何在 Ipython 笔记本中添加外部 javascript 文件
【发布时间】：2015-08-02 18:12:02
【问题描述】：

我正在尝试像这样将 cdn 托管的 d3.js 添加到我的 Ipython 笔记本中

但是当我第一次加载笔记本时，我得到“添加输出的 Javascript 错误”，但如果我再次运行单元格，它可以正常工作。难道我做错了什么？提前致谢。

【问题讨论】：

我使用了与您完全相同的代码，并且可以立即使用。你能告诉我们哪个浏览器，哪个ipython版本，哪个python版本？
@Koen 浏览器是 Chrome，IPython 版本是 3.0.0，Python 版本是 2.7.6
您是否在使用公司代理？如果是这样，您可能在访问 https 资源时遇到问题。尝试将链接更改为 http。
你是否有一些竞争条件，你命令脚本加载然后在下载和解析之前尝试打印对象？

标签： javascript d3.js ipython

【解决方案1】：

您可能会导致竞争条件，即 IPython 解释器可以在瞬间将您的 HTML sn-p 添加到 DOM，然后在加载/处理 D3js 脚本之前触发 JavaScript 命令。我不是浏览器如何加载/执行 JS 方面的专家，但可能会发生一些不同的事情，因为您是在页面加载后执行的。

可能有点矫枉过正，但您可以使用 RequireJS（无论如何都已加载，因为 Jupyter 使用它来管理库）。片段改编自this question：

第一个单元格：

%%javascript
requirejs.config({
    paths: { 
        'd3': ['//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3'], 
    },                                         // strip .js ^, require adds it back
});

任何需要 d3js 的单元格，将调用（例如您的 console.log(d3);）包装在以下内容中：

require(['d3'], function(d3) {
    console.log(d3);  // or whatever
    return {};
});

一个更巧妙的解决方案可能是在这两个单元格之间添加一个time.sleep(1)。

顺便说一句，你不需要from IPython.display import HTML 来使用%%html 单元魔法。

【讨论】：