Введение в привязку данных D3 (часть 1)

Введение в привязку данных D3 (часть 1)

Это первая часть сообщения, состоящего из двух частей. Я представлю API привязки данных D3 в части 1 с примерами кода и добавлю управление состоянием с помощью React для создания работающего приложения во части 2.

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

Выборки D3 DOM

Выборки DOM - это объекты, которые представляют собой набор элементов, соответствующих селектору css. Изменения атрибутов и стиля могут применяться ко всем элементам в наборе, что должно быть знакомо пользователям jQuery.

Выбор данных D3

Выбор данных - это ядро ​​API привязки данных D3. Выбор данных создается путем сравнения массива данных с выбором DOM. В этом примере выбираются .app-user элементы DOM и сопоставляются их с массивом пользовательских данных.

Результирующий выбор можно рассматривать как объект, представляющий разницу между состоянием DOM и состоянием данных, и каждый выбор содержит 3 набора:

• выбор обновления: существующие элементы DOM, соответствующие датуму
• введите выбор: несуществующие элементы DOM, соответствующие датуму
• выбор выхода: существующие элементы DOM, не соответствующие датуму

Обновить выделение

Базовый выбор называется «обновленным выбором», потому что привязанные датумы могут использоваться для обновления свойств элементов DOM, к которым они привязаны. В этом примере обновляется текст каждого элемента в соответствии с именем датума и изменяется цвет каждого элемента в соответствии с ролью датума.

Функция style создает встроенный стиль, который очень удобен для инкапсуляции стилей и предотвращения проступания стилей CSS между элементами. Вы также можете использовать любую библиотеку стилей, которая генерирует имена классов, например гламур. Я рекомендую начать со встроенных стилей.

Ввести выбор

Каждый элемент выбора ввода представляет датум, который не был сопоставлен с существующим элементом DOM. Используйте append функцию выбора ввода, чтобы добавить новые элементы в документ.

Выйти из выделенного

Надеюсь, вы уже догадались, что такое выбор выхода. Каждый элемент выбора выхода представляет собой существующий элемент DOM, который не соответствует никаким датумам. Выбор выхода можно использовать для удаления элементов из документа.

Соответствие данных

Функция data использует позицию индекса для сопоставления. В приведенном выше примере первый элемент users будет соответствовать первому элементу DOM, соответствующему селектору CSS li.app-user, второй элемент users будет соответствовать второму элементу DOM и так далее.

data принимает второй аргумент, key функцию, которая используется для однозначной идентификации данных. Использование функции key может значительно сократить количество модификаций DOM, когда порядок данных часто меняется. Функция key возвращает значение, однозначно определяющее данные.

Переходы

К настоящему времени вы, возможно, думаете: «Хорошо, значит, D3 меняет различия между DOM и данными, но почему я должен описывать состояние этих трех наборов выбора (обновление, вход, выход)? Это кажется более сложным, чем React, где мне нужно описать только одно конечное состояние, а React управляет всеми добавлениями и удалениями ».

Система выбора в D3 сложнее, чем в React, но она также дает вам более выразительный способ описания вашего пользовательского интерфейса. Это наиболее очевидно, когда вы хотите применить определенное поведение к элементам, переходящим между состояниями, например анимировать обновленные, добавленные или удаленные элементы. Анимация этих переходов может быть сложной задачей в React, но тривиально легко с выделением D3. В приведенном ниже примере анимируется цвет обновленных элементов и непрозрачность добавленных и удаленных элементов.

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

Учить больше

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

• Изменение порядка данных по умолчанию изящно обрабатывается, но есть API для настроек, которые могут быть полезны, особенно если вы хотите анимировать изменения порядка данных: заказ документов.
• В D3 есть система обработки событий для взаимодействия с DOM: event docs.
• Подробные сведения о системе объединения данных D3.
• Старый, но хороший, глубокий анализ вложенных выборок.

Следите за частью 2, когда я исследую обертывание кода D3 в компоненте React, чтобы добавить управление состоянием и построить работающее приложение.

FreshTracks.io - это инструмент мониторинга, который накладывает машинное обучение на Kubernetes и Prometheus. Чтобы узнать больше, присоединяйтесь к нашей бета-версии сегодня!