D3.js - Концепции

D3.js - это библиотека JavaScript с открытым исходным кодом для -

Управление объектной моделью документа (DOM) на основе данных.
Работа с данными и фигурами.
Размещение визуальных элементов для линейных, иерархических, сетевых и географических данных.
Обеспечение плавных переходов между состояниями пользовательского интерфейса (UI).
Обеспечение эффективного взаимодействия с пользователем.

Веб-стандарты

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

Язык разметки гипертекста (HTML)
Объектная модель документа (DOM)
Каскадные таблицы стилей (CSS)
Масштабируемая векторная графика (SVG)
JavaScript

Давайте подробно рассмотрим каждый из этих веб-стандартов.

Язык разметки гипертекста (HTML)

Как мы знаем, HTML используется для структурирования содержимого веб-страницы. Он хранится в текстовом файле с расширением «.html».

Example - Типичный простой пример HTML выглядит так

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

   <body>
   </body>
</html>

Объектная модель документа (DOM)

Когда HTML-страница загружается браузером, она преобразуется в иерархическую структуру. Каждый тег в HTML преобразуется в элемент / объект в DOM с иерархией родитель-потомок. Это делает наш HTML более логичным. После того, как DOM сформирован, становится проще манипулировать (добавлять / изменять / удалять) элементами на странице.

Давайте разберемся с DOM, используя следующий HTML-документ -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <title>My Document</title>
   </head>

   <body>
      <div>
         <h1>Greeting</h1>
         <p>Hello World!</p>
      </div>
   </body>
</html>

Объектная модель документа указанного выше HTML-документа выглядит следующим образом:

Каскадные таблицы стилей (CSS)

В то время как HTML дает структуру веб-странице, стили CSS делают веб-страницу более приятной для просмотра. CSS - этоStyle Sheet Languageиспользуется для описания представления документа, написанного в HTML или XML (включая диалекты XML, такие как SVG или XHTML). CSS описывает, как элементы должны отображаться на веб-странице.

Масштабируемая векторная графика (SVG)

SVG - это способ рендеринга изображений на веб-странице. SVG - это не прямое изображение, а просто способ создания изображений с использованием текста. Как следует из названия, этоScalable Vector. Он масштабируется в соответствии с размером браузера, поэтому изменение размера вашего браузера не приведет к искажению изображения. Все браузеры поддерживают SVG, кроме IE 8 и ниже. Визуализации данных - это визуальные представления, и SVG удобно использовать для визуализации визуализаций с помощью D3.js.

Думайте о SVG как о холсте, на котором мы можем рисовать разные формы. Итак, для начала давайте создадим тег SVG -

<svg width = "500" height = "500"></<svg>

Измерение по умолчанию для SVG - пиксели, поэтому нам не нужно указывать, является ли наша единица измерения пикселем. Теперь, если мы хотим нарисовать прямоугольник, мы можем нарисовать его, используя приведенный ниже код -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200"></rect>
</svg>

Мы можем рисовать другие формы в SVG, такие как - линия, круг, эллипс, текст и путь.

Как и стилизация HTML-элементов, стилизация SVG-элементов проста. Установим желтый цвет фона прямоугольника. Для этого нам нужно добавить атрибут «заливка» и указать значение желтым цветом, как показано ниже -

<svg width = "500" height = "500">
   <rect x = "0" y = "0" width = "300" height = "200" fill = "yellow"></rect>
</svg>

JavaScript

JavaScript - это свободно типизированный язык сценариев на стороне клиента, который выполняется в браузере пользователя. JavaScript взаимодействует с элементами HTML (элементами DOM), чтобы сделать пользовательский веб-интерфейс интерактивным. JavaScript реализуетECMAScript Standards, который включает основные функции, основанные на спецификациях ECMA-262, а также другие функции, не основанные на стандартах ECMAScript. Знание JavaScript - необходимое условие для работы с D3.js.