Jupyter lab 在Jupyter实验室中显示d3.js可视化

Jupyter lab 在Jupyter实验室中显示d3.js可视化,jupyter-lab,Jupyter Lab,我想在Jupyter Lab/JupyterLab中显示一个d3.js可视化。我一直在关注各种各样的网络教程,比如 %%javascript require.config({ paths: { d3: 'https://d3js.org/d3.v5.min' } }); 这在Jupyter笔记本中有效,但在Jupyter实验室中我得到: Javascript Error: require is not defined 如何在Jupyter Lab中显示d3.

我想在Jupyter Lab/JupyterLab中显示一个d3.js可视化。我一直在关注各种各样的网络教程,比如

%%javascript
require.config({
    paths: {
        d3: 'https://d3js.org/d3.v5.min'
    }
});

这在Jupyter笔记本中有效,但在Jupyter实验室中我得到:

Javascript Error: require is not defined

如何在Jupyter Lab中显示d3.js可视化?

此功能是由Jupyter Lab javascript扩展(默认安装)添加的。你可以看到一个演示笔记本

相关位如下所示。要添加
d3.js
,您需要:

%%javascript
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js';
    document.head.appendChild(script);
    console.log(window.d3)
然后,以下几点应该会起作用:

from IPython.display import Javascript
svg_script = '''
var svg = d3.select(element)
    .append("svg")
    .attr("width", 300)
    .attr("height", 300);    

svg.append("circle")
    .style("stroke", "gray")
    .style("fill", "cyan")
    .attr("r", 130)
    .attr("cx", 150)
    .attr("cy", 150)
    .transition()
        .delay(100)
        .duration(10000)  
        .attr("r", 10)
        .attr("cx", 150)
        .style("fill", "blue"); 
'''

Javascript(svg_script)