Извините, если это невероятно просто / просто, но я совершенно не знаком с D3.js и просто хочу загрузить этот пример, чтобы попытаться изменить его с моими собственными данными.
Я пытаюсь скопировать следующий график из библиотеки d3fc: https://bl.ocks.org/ColinEberhardt/3ce92a3eef9f97ab4700868896414679
Я создал три разных файла в соответствии с примером:
|- index.html |- chart.js |- data.csv
Но потом, когда я пытаюсь загрузить index.html, в браузере ничего не появляется. Я делаю что-то не так (или не делаю / что-то упускаю)?
index.html
Я ничего не установил, просто скопировал код в файлы.
Спасибо!
Edit:
Когда я пытаюсь загрузить пример, который я загружаю прямо с github автора , он выглядел локально так:
https://imgur.com/a/7ok89md
Когда это должно выглядеть так:
https://colineberhardt.github.io/yahoo-finance-d3fc/
Просто скопируйте весь блок кода и в свой файл index.html, а скрипт - в файл js и включите, используя путь src скрипта.затем объявите обработчик диаграммы, т. е. <div id="chartIdHandle"> </div>, в своем HTML-файле и передайте в функцию d3.select, т. е. d3.select("#chartIdHandle"). Вы можете загрузить файл data.csv в той же функции, т. е. d3.csv("file url"), в свою, если файл находится в локальнойкаталог, который вы можете просто использовать d3.csv("/data.csv") Попробуйте.
<div id="chartIdHandle"> </div>
d3.select("#chartIdHandle")
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>
Попробуйте и дайте мне знать