Установка


Скачивание D3

Для начала необходимо создать папку для своего проекта. В этой папке я рекомендую создать подпапку с названием d3. Дальше необходимо скачать последнюю версию библиотеки D3 в созданную подпапку. В момент написания данной статьи, последней версией D3 была 3.4.2.

В D3 также предусмотрена минифицированная версия, расположенная в файле d3.v3.min.js, из который были удалены всякие пробелы и ненужные символы, чтобы получить более меньший объем файла, чтобы он быстрее скачивался. Эта версия от обычной не отличается функциональностью, однако при работе с проектом лучше использовать обычную версию, чтобы было проще отлаживать проект, а после окончания работы над проектом и публикацией его, заменить обычную версию на минифицированную. Выбор за вами, но в этом руководстве мы будем использовать обычную версию.

Третий вариант - скачать весь репозиторий D3, в котором находятся не только JavaScript файлы, но и все компоненты исходного кода. Вы можете просматривать содержимое репозитория, либо просто скачать все это как сжатый ZIP-архив.


Подключение D3

Создайте простую 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, или посмотреть заметки в вики, как быстро активировать пустой сервер.

Автором оригинального текста книги D3 Tutorials является Scott Murray
На русский язык перевел Ivanov Sergey. 2014 год