如何獲得此圖表在本地渲染？ （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.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>

試試看，讓我知道