Для начала необходимо создать папку для своего проекта. В этой папке я рекомендую создать подпапку с названием d3. Дальше необходимо скачать последнюю версию библиотеки D3 в созданную подпапку. В момент написания данной статьи, последней версией D3 была 3.4.2.
В D3 также предусмотрена минифицированная версия, расположенная в файле d3.v3.min.js, из который были удалены всякие пробелы и ненужные символы, чтобы получить более меньший объем файла, чтобы он быстрее скачивался. Эта версия от обычной не отличается функциональностью, однако при работе с проектом лучше использовать обычную версию, чтобы было проще отлаживать проект, а после окончания работы над проектом и публикацией его, заменить обычную версию на минифицированную. Выбор за вами, но в этом руководстве мы будем использовать обычную версию.
Третий вариант - скачать весь репозиторий D3, в котором находятся не только JavaScript файлы, но и все компоненты исходного кода. Вы можете просматривать содержимое репозитория, либо просто скачать все это как сжатый ZIP-архив.
Создайте простую HTML-страницу внутри папки вашего проекта и назовите ее index.html. Структура папки вашего проекта должна выглядеть, как показано ниже:
project-folder/ d3/ d3.v3.js d3.v3.min.js (optional) index.html
Теперь необходимо вставить каркас кода HTML-страницы, предоставленный ниже. В этом каркасе библиотека D3 подключена внутри тега head, а также в этой странице указано место, где мы будем писать свой JavaScript-код.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3 Test</title> <script type="text/javascript" src="d3/d3.v3.js"></script> </head> <body> <script type="text/javascript"> // Your beautiful D3 code will go here </script> </body> </html>
В любом случае, вы можете открыть получившийся ваш HTML-файл в любом браузере и посмотреть, что получилось. Однако, когда загружаются внешние библиотеки, более надежным будет запустить локальный веб-сервер и смотреть страницу оттуда по адресу http://localhost:8888/. Можно использовать сервер, например MAMP, или посмотреть заметки в вики, как быстро активировать пустой сервер.