Учебники

DC.js — Введение в D3.js

D3.js — это библиотека JavaScript, используемая для создания интерактивных визуализаций в браузере. Библиотека D3 позволяет нам манипулировать элементами веб-страницы в контексте набора данных. Эти элементы могут быть элементами HTML, SVG или Canvas и могут вводиться, удаляться или редактироваться в соответствии с содержимым набора данных. Это библиотека для управления объектами DOM. D3.js может быть ценным помощником в исследовании данных. Это дает вам контроль над представлением ваших данных и позволяет добавлять интерактивность данных.

D3.js является одним из лучших фреймворков по сравнению с другими библиотеками. Это потому что; он работает в Интернете и визуализации данных и имеет корпоративный уровень. Еще одна причина — это большая гибкость, которая позволяет разработчикам по всему миру создавать множество продвинутых диаграмм. Кроме того, он значительно расширил свою функциональность.

Давайте разберемся с основными понятиями D3.js:

  • Выбор
  • Соединение данных
  • SVG
  • переход
  • Анимация
  • D3.js API

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

Выбор

Выбор является одним из основных понятий в D3.js. Он основан на концепции CSS Selector. Те, кто уже использовал JQuery и знают о нем, могут легко понять выбранные варианты. Это позволяет нам выбирать DOM на основе селекторов CSS, а затем предоставлять опции для изменения или добавления и удаления элементов DOM.

Регистрация данных

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

SVG

SVG расшифровывается как Scalable Vector Graphics . SVG — это формат векторной графики на основе XML. Он предоставляет возможность рисовать различные формы, такие как линии, прямоугольники, круги, эллипсы и т. Д. Следовательно, проектирование визуализаций с помощью SVG дает вам больше возможностей и гибкости.

преобразование

SVG предоставляет опции для преобразования одного элемента формы SVG или группы элементов SVG. SVG-преобразование поддерживает Перевод, Масштабирование, Поворот и Наклон.

переход

Переход — это процесс перехода одного состояния в другое. D3.js предоставляет метод transition () для выполнения перехода на HTML-странице.

Анимация

D3.js поддерживает анимацию через переход. Анимация может быть выполнена при правильном использовании перехода. Переходы — это ограниченная форма анимации по ключевым кадрам, включающая только два ключевых кадра: начало и конец . Начальный ключевой кадр обычно является текущим состоянием DOM, а конечный ключевой кадр — это набор атрибутов, стилей и других указанных вами свойств. Переходы хорошо подходят для перехода к новому представлению без сложного кода, который зависит от начального представления.

D3.js API

Давайте кратко разберемся с некоторыми важными методами API D3.js.

API коллекций

Коллекция — это просто объект, который группирует несколько элементов в одну единицу. Он также называется контейнером. Он содержит объекты, карты, наборы и гнезда.

API путей

Контуры используются для рисования прямоугольников, кругов, эллипсов, полилиний, многоугольников, прямых линий и кривых. Пути SVG представляют собой контур формы, которую можно обвести, заполнить, использовать в качестве обтравочного контура или любой комбинации всех трех.

Axis API

D3.js предоставляет функции для рисования осей. Ось состоит из линий, галочек и меток. Ось использует масштаб, поэтому каждой оси должен быть присвоен масштаб для работы.

API масштабирования

Масштабирование помогает масштабировать ваш контент. Вы можете сосредоточиться на конкретном регионе, используя подход «щелкни и перетащи».

API с разделителями-значениями

Разделитель — это последовательность из одного или нескольких символов, используемая для указания границы между отдельными независимыми областями в виде простого текста или других данных. Разделитель полей — это последовательность значений, разделенных запятыми. Вкратце, значения, разделенные разделителем, — это значения, разделенные запятыми (CSV), или значения, разделенные табуляцией (TSV).