D3.js - Установка

В этой главе мы узнаем, как настроить среду разработки D3.js. Прежде чем мы начнем, нам понадобятся следующие компоненты -

Библиотека D3.js
Editor
веб-браузер
веб сервер

Давайте подробно рассмотрим шаги один за другим.

Библиотека D3.js

Нам необходимо включить библиотеку D3.js на вашу веб-страницу HTML, чтобы использовать D3.js для создания визуализации данных. Мы можем сделать это двумя способами:

Включите библиотеку D3.js из папки вашего проекта.
Включите библиотеку D3.js из CDN (Content Delivery Network).

Скачать библиотеку D3.js

D3.js - это библиотека с открытым исходным кодом, и исходный код библиотеки находится в свободном доступе в Интернете по адресу https://d3js.org/Веб-сайт. Посетите веб-сайт D3.js и загрузите последнюю версию D3.js (d3.zip). На данный момент последняя версия 4.6.0.

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

Example - Рассмотрим следующий пример.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js - это код JavaScript, поэтому мы должны писать весь наш код D3 в теге «script». Нам может потребоваться манипулировать существующими элементами DOM, поэтому рекомендуется писать код D3 непосредственно перед концом тега body.

Включить библиотеку D3 из CDN

Мы можем использовать библиотеку D3.js, связав ее непосредственно с нашей HTML-страницей из сети доставки контента (CDN). CDN - это сеть серверов, на которых файлы размещаются и доставляются пользователю в зависимости от его географического положения. Если мы используем CDN, нам не нужно загружать исходный код.

Включите библиотеку D3.js, используя URL-адрес CDN https://d3js.org/d3.v4.min.js на нашу страницу, как показано ниже.

Example - Рассмотрим следующий пример.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Редактор D3.js

Нам понадобится редактор, чтобы начать писать ваш код. Есть несколько отличных IDE (интегрированная среда разработки) с поддержкой JavaScript, например:

Код Visual Studio
WebStorm
Eclipse
Возвышенный текст

Эти IDE обеспечивают интеллектуальное завершение кода, а также поддерживают некоторые современные инфраструктуры JavaScript. Если у вас нет навороченной IDE, вы всегда можете использовать базовый редактор, такой как Блокнот, VI и т. Д.

Веб-браузер

D3.js работает во всех браузерах, кроме IE8 и ниже.

Веб сервер

Большинство браузеров обслуживают локальные HTML-файлы непосредственно из локальной файловой системы. Однако существуют определенные ограничения при загрузке файлов внешних данных. В последних главах этого руководства мы будем загружать данные из внешних файлов, напримерCSV а также JSON. Поэтому нам будет проще, если мы настроим веб-сервер с самого начала.

Вы можете использовать любой удобный для вас веб-сервер - например, IIS, Apache и т. Д.

Просмотр вашей страницы

В большинстве случаев мы можем просто открыть ваш HTML-файл в веб-браузере, чтобы просмотреть его. Однако при загрузке внешних источников данных надежнее запустить локальный веб-сервер и просматривать свою страницу с сервера.(http://localhost:8080).