Как отредактировать визуализацию из примеров на веб-сайте d3.org?

Question

Я очень новичок в визуализации данных, но мне нужно отредактировать визуализацию примера, представленную на веб-сайте d3, и настроить ее немного. В примере на: http://bl.ocks.org/mbostock/4339607

Я создал и файл index.html и файл CSV и непосредственно запустить файл index.html в браузере (хром). Но ничего не отображается. Пожалуйста, расскажите мне, что я делаю неправильно.

Answer 1

Вы ищете пример? Расположение файлов должно быть в правильных папках, но попробуйте использовать этот пример в качестве руководства.

http://codepen.io/Zig_Zag/pen/YPdQKL

Вы можете увидеть единственную вещь, включенную это библиотека D3.js:

<script src="http://d3js.org/d3.v3.min.js" type ="text/javascript"></script> 
<div id="canvas"></div> 

Это должно быть то же самое, что вы пытаетесь сделать. Если вам нужна дополнительная помощь, создайте свой собственный код и отправьте его в качестве примера, чтобы мы могли его отладить.

Answer 2

Я предполагаю, что вы получаете что-то ошибки вдоль линий:

XMLHttpRequest не может загрузить файл: ///../flare.csv. Запросы на кросс-начало поддерживаются только для схем протокола: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Код: d3.csv, который производит запрос AJAX для загрузки ресурса. Chrome помещает ограничения на запросы AJAX в вашу файловую систему (URI с протоколом file: //). Чтобы загрузить файл, вам необходимо будет обслуживать ваш код через сервер.

Если у вас установлен Python 3, он включает в себя простой файловый сервер, который вы можете использовать для этого.

В каталоге, который включает в свой index.html, вы просто звоните:

python -m http.server 

Затем, в Chrome вы перейти к localhost:8000.