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).