怎样才能使这张图表在本地呈现？(D3.js)

Question

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

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

我创建了三个不同的文件，如下例所示：

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

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

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

谢谢!

编辑：

当我尝试加载我直接从作者的github下载的示例时，它在本地是这样的：

https://imgur.com/a/7ok89md

当它看起来像这样：

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

Answer 1

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

试一试让我知道

​