javascript - 我怎样才能让这个图表在本地渲染？ (D3.js)

Question

如果这非常简单/基本，我很抱歉，但我对 D3.js 完全陌生，我只想加载这个示例，以便我可以尝试用自己的数据修改它。

我正在尝试从 d3fc 库复制以下图表:https://bl.ocks.org/ColinEberhardt/3ce92a3eef9f97ab4700868896414679

我根据示例创建了三个不同的文件:

|- index.html
|- chart.js
|- data.csv

但是当我尝试加载 index.html 时，浏览器中什么也没有出现。我做错了什么(或者没有做/错过了什么)吗？

我没有安装任何东西，只是将代码复制到文件中。

谢谢!

编辑:

当我尝试加载an example that I download directly from the author's github时，本地看起来像这样:

/image/POkSl.jpg

当它看起来像这样时:

https://colineberhardt.github.io/yahoo-finance-d3fc/

Answer 1

只需将整个代码块复制到您的 index.html 文件中，将脚本复制到 js 文件中，并使用脚本 src 路径包含其中。然后声明图表处理程序，即 <div id="chartIdHandle"> </div>在您的 html 文件中并传递给 d3.select 函数，即 d3.select("#chartIdHandle")您可以在同一函数中加载 data.csv 文件即d3.csv("file url")如果文件位于本地，则在您的您可以使用 d3.csv("/data.csv") 目录尝试一下。

首先我将所有脚本 URL 更改为 https

<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
<script src="https://unpkg.com/d3@5.5.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/d3fc@14.0.3/build/d3fc.js"></script>

然后是图表js文件

<script src='chart.js' type='text/babel'></script>

尝试一下并告诉我