Учебники

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

Декабрь 25, 2018

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

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

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

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

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

  • Включите библиотеку D3.js из папки вашего проекта.
  • Включите библиотеку D3.js из CDN (Сеть доставки контента).

Скачать библиотеку 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-страницу, как показано ниже.

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

<!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, на нашу страницу, как показано ниже.

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

<!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 Code
  • WebStorm
  • Затмение
  • Возвышенный текст

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

Веб-браузер

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

Веб сервер

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

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

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

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

96
Share: