Поле encode: блоки enter, update, exit, hover

В декларативной визуализации на базе Vega-Lite и низкоуровневой системы Vega ключевую роль в управлении отображением данных играет блок encode. Он определяет, как данные связываются с визуальными свойствами графических примитивов (marks) и как эти свойства изменяются на разных стадиях жизненного цикла элементов сцены.

encode представляет собой словарь каналов визуализации, где каждый канал (например, x, y, fill, opacity, size, text) содержит набор состояний. Эти состояния соответствуют фазам существования графического элемента:

  • enter
  • update
  • exit
  • hover

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

Базовая идея заключается в том, что каждый mark в сцене рассматривается как объект с динамическим состоянием, а не как статический SVG/Canvas элемент.

Модель жизненного цикла графического элемента

Графический элемент в Vega проходит через несколько фаз:

  1. Создание (enter)
  2. Обновление (update)
  3. Удаление (exit)
  4. Временное взаимодействие (hover)

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

enter: инициализация визуального состояния

Блок enter определяет начальные значения при создании элемента. Он используется для задания стартовых параметров, которые часто не совпадают с финальным состоянием.

Типичные свойства:

  • начальная позиция (x, y)
  • начальная прозрачность (opacity)
  • начальный масштаб (scale)
  • стартовая геометрия

Пример:

"encode": {
  "enter": {
    "x": {"value": 0},
    "y": {"value": 0},
    "opacity": {"value": 0}
  }
}

Такой подход позволяет создавать плавные появления через анимацию перехода в update.

Роль enter в анимационных переходах

enter часто используется как отправная точка интерполяции. Система автоматически вычисляет переход к состоянию update, если оно задано.

При отсутствии enter система использует значения по умолчанию, что делает поведение менее контролируемым.

update: основное состояние элемента

Блок update описывает целевое состояние элемента при наличии данных. Это наиболее важная часть encode, так как именно она отражает актуальную визуализацию.

В update обычно определяются:

  • координаты на основе данных (field, scale)
  • визуальные стили (fill, stroke)
  • размеры (width, height, radius)
  • текстовые значения

Пример:

"encode": {
  "update": {
    "x": {"scale": "xscale", "field": "value"},
    "y": {"scale": "yscale", "field": "category"},
    "fill": {"value": "steelblue"}
  }
}

Динамическая привязка данных

В update активно используется привязка к данным через:

  • field — ссылка на поле данных
  • scale — преобразование значения через шкалу
  • выражения (expressions)

Это делает систему декларативной и отделяет данные от визуального представления.

Приоритет update

Если update определён, он всегда переопределяет enter после первичного создания объекта. Таким образом, enter можно рассматривать как временное начальное состояние.

exit: удаление и завершение жизненного цикла

Блок exit определяет поведение элемента при удалении из сцены. Он критически важен для анимации удаления данных (например, при фильтрации или обновлении набора данных).

Типичные свойства:

  • уменьшение прозрачности
  • смещение позиции
  • уменьшение масштаба

Пример:

"encode": {
  "exit": {
    "opacity": {"value": 0},
    "y": {"value": 200}
  }
}

Механика удаления

В Vega-Lite удаление данных в визуализации приводит к генерации transition-сценария:

  • элемент помечается как устаревший
  • активируется exit
  • после завершения анимации элемент удаляется из DOM/Canvas

Временная согласованность

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

hover: интерактивное состояние

Блок hover активируется при наведении курсора на элемент. Он используется для временного изменения визуального представления без изменения данных.

Типичные применения:

  • подсветка элемента
  • увеличение масштаба
  • изменение цвета
  • отображение дополнительной информации

Пример:

"encode": {
  "hover": {
    "fill": {"value": "orange"},
    "strokeWidth": {"value": 2}
  }
}

Приоритет hover

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

Использование сигналов

В более сложных схемах hover может быть связан с сигналами (signals), которые управляют глобальным состоянием сцены:

  • выделение группы элементов
  • синхронизация нескольких графиков
  • управление tooltip-системой

Иерархия состояний encode

При одновременном определении всех блоков применяется следующая приоритетность:

  1. hover (временное взаимодействие)
  2. update (основное состояние)
  3. enter (инициализация)
  4. exit (завершение)

Эта иерархия обеспечивает предсказуемое поведение визуальных элементов.

Интерполяция между состояниями

Система Vega автоматически выполняет интерполяцию значений между состояниями:

  • числовые значения интерполируются линейно
  • цвета интерполируются в RGB/HSV пространстве
  • позиции учитывают scale-функции

Пример перехода:

"enter": { "opacity": {"value": 0} },
"update": { "opacity": {"value": 1} }

Такой код создаёт плавное появление элемента.

Условные выражения внутри encode

Каждое свойство может содержать выражения:

"fill": {
  "expr": "datum.value > 10 ? 'red' : 'blue'"
}

Это позволяет внедрять логику прямо в декларацию визуализации без внешнего кода.

Сложные сценарии взаимодействия состояний

В реальных визуализациях все четыре блока часто комбинируются:

  • enter задаёт стартовую анимацию появления
  • update определяет основное положение данных
  • hover усиливает интерактивность
  • exit обеспечивает мягкое удаление

Пример комплексной конфигурации

"encode": {
  "enter": {
    "opacity": {"value": 0}
  },
  "update": {
    "x": {"scale": "xscale", "field": "value"},
    "y": {"scale": "yscale", "field": "category"},
    "opacity": {"value": 1}
  },
  "hover": {
    "fill": {"value": "gold"}
  },
  "exit": {
    "opacity": {"value": 0}
  }
}

Поведение при изменении данных

При обновлении набора данных система выполняет дифференциацию:

  • новые элементы → enter
  • существующие → update
  • удалённые → exit

Такой механизм обеспечивает согласованную синхронизацию визуализации с источником данных без ручного управления DOM.

Роль encode в архитектуре декларативной визуализации

Блок encode выступает связующим звеном между:

  • данными (dataflow)
  • визуальными примитивами (marks)
  • интерактивностью (signals)
  • системой переходов (transitions)

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

Оглавление