我们如何使用 d3 将 CSV 文件加载到 JupyterLab 中?
How can we load a CSV file into JupyterLab using d3?
我无法在 JupyterLab 中找到 运行 d3 的直接方法,但是当我以这种方式加载它时:
%%html
<script src="https://d3js.org/d3.v7.min.js"></script>
这个有效:
%%javascript
d3.select(element)
.append("text")
.text("Hello World!");
Hello World!
现在我正在尝试加载像这样的 CSV 文件:
Name,Count
A,10
B,15
C,14
为此,我 运行 这样做:
%%javascript
d3.csv("df.csv", function(data){
console.log(data);
});
这不起作用,输出是这样的:
使用 d3 将 CSV 加载到 JupyterLab 的正确方法是什么?
这是一个静态文件,因此为了加载它,您需要使用一个将文件作为原始文件 text/blobs 提供服务的端点,即 files/
。它需要一个相对于 jupyter 服务器根目录的路径(这是您启动 JupyterLab 的目录)。例如,如果您在根目录中有 df.csv
并且您的 JupyterLab 的 URL 看起来像:
http://localhost:8889/lab/tree/Untitled.ipynb
您想使用:
http://localhost:8888/files/df.csv
我无法在 JupyterLab 中找到 运行 d3 的直接方法,但是当我以这种方式加载它时:
%%html
<script src="https://d3js.org/d3.v7.min.js"></script>
这个有效:
%%javascript
d3.select(element)
.append("text")
.text("Hello World!");
Hello World!
现在我正在尝试加载像这样的 CSV 文件:
Name,Count
A,10
B,15
C,14
为此,我 运行 这样做:
%%javascript
d3.csv("df.csv", function(data){
console.log(data);
});
这不起作用,输出是这样的:
使用 d3 将 CSV 加载到 JupyterLab 的正确方法是什么?
这是一个静态文件,因此为了加载它,您需要使用一个将文件作为原始文件 text/blobs 提供服务的端点,即 files/
。它需要一个相对于 jupyter 服务器根目录的路径(这是您启动 JupyterLab 的目录)。例如,如果您在根目录中有 df.csv
并且您的 JupyterLab 的 URL 看起来像:
http://localhost:8889/lab/tree/Untitled.ipynb
您想使用:
http://localhost:8888/files/df.csv