Поле background, padding, autosize

В спецификациях Vega и Vega-Lite поле background задаёт фон всего визуализационного холста. Это глобальный параметр уровня сцены (scene), который влияет на восприятие графика в целом, а не на отдельные визуальные marks.

В Vega-Lite оно чаще используется в верхнем уровне спецификации:

{
  "background": "#ffffff"
}

В Vega аналогично:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "background": "#f5f5f5"
}

Типы значений background

Поле поддерживает любые CSS-совместимые значения цвета:

  • шестнадцатеричные коды: #fff, #ffffff
  • rgba/hsl: rgba(0,0,0,0.1)
  • именованные цвета: white, black, transparent
  • градиенты через CSS (в зависимости от рендерера могут быть ограничены)

Ключевой аспект — фон применяется ко всей SVG/Canvas сцене, а не к области данных.

Влияние на визуальную композицию

background напрямую влияет на:

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

При работе с дашбордами часто используют прозрачный фон:

{
  "background": "transparent"
}

Это позволяет встраивать визуализацию в уже стилизованный UI.

Поле padding

padding определяет внутренние отступы между границей сцены и областью построения графика (plotting area). Это один из ключевых параметров управления компоновкой.

Базовая структура

{
  "padding": 20
}

Значение в этом случае применяется равномерно со всех сторон.

Также поддерживается детализированная форма:

{
  "padding": {
    "left": 40,
    "right": 20,
    "top": 10,
    "bottom": 30
  }
}

Роль padding в системе координат

Внутри Vega/Vega-Lite визуализация делится на несколько областей:

  • внешняя сцена (scene)
  • padding-зона
  • область построения (plot)
  • оси и подписи
  • графические marks

padding определяет смещение plot-области внутрь сцены, фактически влияя на координатную систему:

  • (0,0) данных не совпадает с (0,0) canvas
  • шкалы пересчитываются с учётом отступов
  • оси располагаются внутри padded-области

Связь с autosize

padding тесно взаимодействует с механизмом autosize, поскольку оба параметра влияют на итоговую геометрию визуализации.

Поле autosize

autosize управляет тем, как Vega/Vega-Lite вычисляет размеры графика и адаптирует его под контейнер или заданные размеры.

Основные режимы autosize

Существует несколько стратегий:

  • pad
  • fit
  • fit-x
  • fit-y
  • none

Пример:

{
  "autosize": "pad"
}

Режим pad

pad — значение по умолчанию в Vega.

Особенности:

  • учитывает width и height как размер plot-области
  • добавляет padding вокруг
  • итоговый размер сцены становится больше заданного

Это классическая модель «внутреннего графика».

Режим fit

{
  "autosize": "fit"
}

fit изменяет поведение:

  • вся сцена (включая padding) масштабируется под заданные width и height
  • padding не увеличивает итоговый размер, а входит в расчёт
  • plot-область уменьшается автоматически

Используется при строгой подгонке под контейнеры UI.

Режимы fit-x и fit-y

Позволяют ограничить адаптацию только одной осью:

  • fit-x — подгонка по ширине
  • fit-y — подгонка по высоте

Пример:

{
  "autosize": "fit-x"
}

Такие режимы полезны для горизонтальных диаграмм, где высота фиксирована, а ширина адаптивна.

Режим none

{
  "autosize": "none"
}

Отключает автоматическое масштабирование.

Особенности:

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

Применяется в низкоуровневых сценах Vega или при ручной компоновке.

Взаимодействие background, padding и autosize

Эти три поля формируют базовую систему геометрии визуализации.

Последовательность расчёта

  1. задаётся width и height
  2. применяется autosize
  3. вычисляется plot-область
  4. применяется padding
  5. рендерится сцена с background

Типовые комбинации

Встраивание в интерфейс
{
  "background": "transparent",
  "autosize": "fit",
  "padding": 10
}

Характеристики:

  • адаптация под контейнер
  • минимальные отступы
  • отсутствие визуальной рамки
Статичный график для отчёта
{
  "background": "#ffffff",
  "autosize": "pad",
  "padding": 40
}

Характеристики:

  • фиксированная структура
  • увеличенные поля для осей и подписей
  • независимость от контейнера
Компактные панели данных
{
  "background": "#fafafa",
  "autosize": "fit-x",
  "padding": {
    "left": 10,
    "right": 10,
    "top": 5,
    "bottom": 5
  }
}

Характеристики:

  • плотное размещение
  • горизонтальная адаптация
  • минимизация пустого пространства

Геометрические последствия настройки autosize

autosize влияет не только на размер, но и на:

  • пересчёт шкал (scale)
  • позиционирование осей (axis)
  • clipping области (clip)
  • поведение interactive signals (в Vega)

При fit изменяются реальные координаты пикселей, что делает невозможным простое наложение фиксированных SVG-слоёв поверх графика без синхронизации.

Влияние padding на оси и подписи

Увеличение padding приводит к:

  • увеличению области для tick-labels
  • снижению риска обрезки длинных подписей
  • изменению плотности данных на экране

Особенно критично при:

  • длинных категориальных осях
  • временных рядах с крупными датами
  • многоуровневых подписях

Особенности рендеринга background

В зависимости от renderer-а:

  • SVG: фон реализуется через прямоугольник <rect>
  • Canvas: фон заливается через fillRect

Это влияет на:

  • производительность при частых перерисовках
  • прозрачность слоёв
  • поведение при экспортировании графиков

Порядок приоритетов размеров

Внутренний механизм Vega/Vega-Lite использует следующую иерархию:

  1. autosize
  2. width / height
  3. padding
  4. содержимое (marks, axes)

Ошибки в конфигурации обычно проявляются как:

  • обрезанные подписи
  • смещение графика
  • несоответствие размеров контейнеру

Практика комбинирования параметров

Комбинации этих трёх полей часто определяют архитектуру визуализации:

  • dashboard-ориентированные графики используют fit и прозрачный background
  • аналитические отчёты используют pad и фиксированный фон
  • компактные виджеты используют минимальный padding и адаптивные режимы autosize

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

Оглавление