Поле fit и fitExtent

Механизм авторазмера в Vega и Vega-Lite определяет, каким образом область визуализации подстраивается под данные, компоненты графика и заданные ограничения по ширине и высоте. В основе лежит конфигурация autosize, которая управляет стратегией размещения графического содержимого внутри контейнера.

Ключевая задача авторазмера — согласовать три элемента:

  • заданные размеры (width, height)
  • внутренние отступы (padding)
  • фактические габариты визуальных элементов (оси, подписи, легенды, маркеры)

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

Поле fit в autosize

Режим fit используется для масштабирования и подгонки содержимого визуализации под доступное пространство таким образом, чтобы вся сцена целиком помещалась в заданные границы.

Основная идея режима:

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

Конфигурация задаётся через:

{
  "autosize": {
    "type": "fit"
  }
}

Поведение режима fit

При включённом fit Vega/Vega-Lite выполняет перерасчёт масштаба координатных систем так, чтобы:

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

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

Влияние fit на геометрию графика

При использовании fit система координат масштабируется автоматически. Это означает:

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

Особенно заметно это при работе с:

  • scatter plot
  • heatmap
  • географическими проекциями
  • сложными layered-графиками

fit и padding

Отступы играют ключевую роль в режиме fit.

{
  "width": 400,
  "height": 300,
  "padding": 20,
  "autosize": {
    "type": "fit"
  }
}

Алгоритм распределения пространства включает:

  1. вычитание padding из общей области
  2. вычисление доступного viewport
  3. масштабирование графического содержимого под оставшуюся область

Важно, что padding в режиме fit не игнорируется, а входит в расчёт конечного масштаба.

fit и динамическое изменение размеров

При изменении размеров контейнера (например, при resize окна):

  • координатная система пересчитывается
  • график полностью перерисовывается
  • пропорции сохраняются относительно нового размера

В Vega-Lite это особенно важно при:

  • responsive dashboards
  • embedding charts в flex/grid layout
  • визуализациях с адаптивной шириной

Ограничения режима fit

Несмотря на универсальность, режим fit имеет ряд особенностей:

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

Поле fitExtent

fitExtent используется для более точного контроля области, в которую должно быть вписано содержимое визуализации. В отличие от общего fit, который работает с контейнером целиком, fitExtent задаёт явную геометрическую область, внутри которой происходит подгонка.

Концептуально:

fitExtent ограничивает область построения не просто размерами view, а вычисленным или заданным прямоугольником, учитывающим компоновку элементов визуализации.

Логика работы fitExtent

При применении fitExtent система учитывает:

  • внешние границы доступного пространства
  • дополнительные элементы (оси, подписи, легенды)
  • вычисленные смещения layout-а

И затем выполняет масштабирование так, чтобы:

  • содержимое оставалось внутри рассчитанного прямоугольника
  • визуальные компоненты не пересекали границы extent
  • итоговый bounding box соответствовал заданному ограничению

Отличие fitExtent от fit

Характеристика fit fitExtent
Область контроля весь viewport вычисленный bounding box
Учет layout-элементов частичный более строгий
Применение общая адаптивность точная компоновка
Уровень контроля высокий более низкоуровневый

Использование fitExtent в композициях

В сложных визуализациях, где присутствуют:

  • несколько панелей (small multiples)
  • вложенные графики
  • синхронизированные оси
  • внешние легенды

fitExtent обеспечивает более предсказуемое распределение пространства, так как учитывает не только размеры контейнера, но и фактическую компоновку элементов.

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

При активном fitExtent:

  • оси учитываются как часть bounding box
  • легенды влияют на итоговый размер extent
  • подписи могут расширять вычисляемую область
  • итоговый масштаб пересчитывается с учётом всех декоративных элементов

Это делает поведение более стабильным в сложных layout-структурах, где стандартный fit может давать непредсказуемые визуальные смещения.

Сравнение режимов autosize

fit

  • глобальная подгонка содержимого
  • равномерное масштабирование
  • ориентирован на контейнер

fitExtent

  • подгонка под вычисленный bounding box
  • учитывает структуру визуализации
  • более строгая геометрическая модель

pad

  • фиксированные размеры области построения
  • padding используется как внутренний отступ
  • масштаб не изменяется автоматически

none

  • отсутствие авторазмера
  • полная ответственность за размеры лежит на спецификации
  • возможны переполнения контейнера

fit-x и fit-y

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

Примеры конфигурации

Базовый fit

{
  "width": 500,
  "height": 300,
  "autosize": {
    "type": "fit"
  }
}

fit с padding

{
  "width": 500,
  "height": 300,
  "padding": 30,
  "autosize": {
    "type": "fit"
  }
}

Применение fitExtent

{
  "width": 600,
  "height": 400,
  "autosize": {
    "type": "fit",
    "contains": "padding"
  }
}

В Vega-спецификациях fitExtent может также задаваться через внутренние параметры layout-а и вычисляемые области компоновки, влияющие на итоговый bounding box визуализации.

Поведение в сложных визуальных структурах

При использовании layered-графиков или concatenation-композиций:

  • fit перераспределяет масштаб на уровне всей сцены
  • fitExtent корректирует масштаб на уровне отдельных областей
  • итоговый результат зависит от иерархии вложенности

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

Оглавление