如何获得此图表在本地渲染？ （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时，它在本地看起来像这样：

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

何时应如下所示：

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

Answer 1

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

首先，我将所有脚本网址更改为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>

尝试一下，让我知道