Учебники

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

Декабрь 25, 2018

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

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

Веб Стандарты

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

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

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

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

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

Пример . Типичный пример 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 — это язык таблиц стилей, используемый для описания представления документа, написанного на HTML или XML (включая диалекты XML, такие как SVG или XHTML). CSS описывает, как элементы должны отображаться на веб-странице.

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

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

Думайте о 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 , которые включают основные функции, основанные на спецификациях ECMA-262, а также другие функции, которые не основаны на стандартах ECMAScript. Знание JavaScript является обязательным условием для D3.js.

51
Share: