Функция обновления в D3
Чтобы сделать наши визуализации динамическими, нам нужно подумать о двух важных вещах:

  1. Какие части нашего кода должны запускаться только один раз
  2. Какие части нашего кода должны обновляться через каждый интервал

Логика обновления может быть простой. Для базовой визуализации, когда данные меняются, возможно, нам нужно только обновить шкалы и оси (что также будет означать, что любые связанные полосы, линии и т. Д. Должны быть обновлены). Для более сложных визуализаций логика обновления может потребовать гораздо большего внимания.

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

** Схема обновления 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).
  • Для переходов убедитесь, что интервал перехода короче, чем интервал обновления.