Функция обновления в D3
Чтобы сделать наши визуализации динамическими, нам нужно подумать о двух важных вещах:
- Какие части нашего кода должны запускаться только один раз
- Какие части нашего кода должны обновляться через каждый интервал
Логика обновления может быть простой. Для базовой визуализации, когда данные меняются, возможно, нам нужно только обновить шкалы и оси (что также будет означать, что любые связанные полосы, линии и т. Д. Должны быть обновлены). Для более сложных визуализаций логика обновления может потребовать гораздо большего внимания.
Одно из наиболее оптимизированных решений этой проблемы - написать функцию обновления, которая затем будет вызываться из цикла, загружающего наши данные.
** Схема обновления D3 **
Это одна из самых сложных частей D3 для понимания. Понимание методов «входа», «выхода» и «обновления» имеет решающее значение для понимания того, как D3 работает изнутри.
Enter stage right…
Метод ввода в D3 представляет все элементы, которые присутствуют в нашем массиве данных, но не существуют на странице. Это элементы, которые необходимо создать в DOM.
… Выход из этапа слева
Метод выхода представляет все элементы, которые есть на странице, но не существуют в массиве данных. Это элементы, которые необходимо удалить со страницы.
Это групповая вещь.
Группы просто представляют все элементы, которые в настоящее время существуют на экране.
Собираем все вместе.
Вот стандартный способ обновления данных в D3:
1. Объединение данных - выберите все совпадающие элементы на экране с помощью selectAll,
и обновите данные, которые мы используем.
2. Exit - используйте селектор exit (), чтобы удалить элементы, которые не существуют
в нашем новом массиве данных.
3. Обновление - установка атрибутов для существующих элементов на экране.
4. Enter - используйте селектор enter (), чтобы установить атрибуты для новых элементов
в нашем массиве данных.
Делаем это динамичным: использование переходных обновлений в D3
Распространенные ошибки
- При обновлении будьте осторожны, чтобы не добавлять повторно на холст элементы, которые на самом деле не нуждаются в обновлении. Лучше создать, например, группу оси X как часть глобальной области видимости, а затем вызвать эту группу из функции обновления. Это позволяет нам обновлять ранее созданные оси, а не создавать новые при каждом обновлении (подробное объяснение см. В Udemy «Освоение D3 JS», раздел 5, лекция 41).
- Для переходов убедитесь, что интервал перехода короче, чем интервал обновления.