Поле background и padding

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

Назначение поля

Поле background задаёт цвет или стиль фона всего визуального контейнера. Это не область данных и не часть координатной системы, а именно внешний слой, на котором размещается визуализация.

В Vega-Lite параметр background может задаваться на уровне спецификации и применяется ко всей диаграмме целиком.

В Vega аналогичная настройка может находиться в конфигурации (config.background) и влияет на весь render view.

Базовое поведение

Если background не задан, используется значение по умолчанию (обычно прозрачный фон или цвет, заданный контейнером HTML/CSS).

Простейшее определение:

{
  "background": "#ffffff"
}

или в Vega-Lite:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "background": "#f5f5f5",
  "data": { "values": [10, 20, 30] },
  "mark": "bar",
  "encoding": {
    "x": { "field": "value", "type": "quantitative" }
  }
}

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

background не влияет на:

  • систему координат
  • область построения графика
  • шкалы (scales)
  • размеры view

Он влияет только на:

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

Слои фона в Vega

В Vega различаются несколько уровней визуального фона:

  1. background (view) — основной фон сцены
  2. style.background / config.background — глобальная конфигурация
  3. group background — фон группировок
  4. mark fill — визуально может имитировать фон, но относится к данным

Пример конфигурационного уровня:

{
  "config": {
    "background": "#1e1e1e"
  }
}

Прозрачный фон и интеграция в UI

Значение null или отсутствие background позволяет интегрировать график в существующую верстку:

{
  "background": null
}

Это часто используется при:

  • встраивании в dashboard
  • наложении на карты
  • использовании темной/светлой темы через CSS

padding: управление внутренними отступами

Назначение поля

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

В отличие от background, который задаёт внешний слой, padding управляет внутренней геометрией макета.

Форматы задания padding

Числовое значение

Единое значение применяется ко всем сторонам:

{
  "padding": 20
}

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

{
  "padding": {
    "top": 20,
    "bottom": 20,
    "left": 20,
    "right": 20
  }
}

Объектный формат

Позволяет точно управлять каждой стороной:

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

Роль padding в системе компоновки

Внутренние отступы влияют на:

  • размещение осей (axes)
  • позиционирование заголовков (titles)
  • доступное пространство под marks
  • визуальную плотность графика

Алгоритмически:

available_width  = width  - padding.left - padding.right
available_height = height - padding.top  - padding.bottom

Связь padding и autosize

В Vega и Vega-Lite система autosize тесно связана с padding.

Пример:

{
  "width": 400,
  "height": 300,
  "padding": 50,
  "autosize": "pad"
}

Режим pad учитывает padding как фиксированную часть макета.

Другие режимы:

  • fit — масштабирует содержимое под доступную область
  • none — игнорирует автоматическую подгонку
  • pad — сохраняет отступы

Padding и оси

При увеличении padding:

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

При уменьшении padding:

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

Пример влияния padding на bar chart

{
  "background": "#ffffff",
  "padding": 5,
  "data": { "values": [{"a": "A", "b": 28}, {"a": "B", "b": 55}] },
  "mark": "bar",
  "encoding": {
    "x": { "field": "a", "type": "nominal" },
    "y": { "field": "b", "type": "quantitative" }
  }
}

И вариант с увеличенными отступами:

{
  "background": "#ffffff",
  "padding": 40
}

Разница проявляется не в данных, а в композиции: оси и бары получают больше пространства и перестают «прилипать» к краям.

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

Геометрическая модель

Визуальная область можно представить слоями:

  1. background — внешний прямоугольник сцены
  2. padding — пустая зона внутри
  3. plot area — область графика
  4. marks — визуальные элементы

Сценарии сочетания

Светлый фон + большой padding

Используется для отчётных графиков:

{
  "background": "#ffffff",
  "padding": 60
}

Даёт строгую визуальную структуру и читаемость.

Прозрачный фон + минимальный padding

Используется для UI-встраивания:

{
  "background": null,
  "padding": 10
}

Позволяет графику “вписываться” в интерфейс.

Тёмный фон + увеличенный padding

Используется в аналитических панелях:

{
  "background": "#1a1a1a",
  "padding": 30
}

Padding компенсирует визуальную плотность тёмной темы.

Поведение в Vega (низкоуровневая модель)

В Vega padding и background чаще задаются через config:

{
  "config": {
    "background": "#f0f0f0",
    "padding": 20
  }
}

Vega интерпретирует это на уровне runtime layout engine:

  • вычисляет bounding box view
  • вычитает padding
  • создаёт scenegraph с учётом отступов
  • применяет background как базовый слой сцены

Типичные ошибки конфигурации

Отсутствие padding при плотных осевых подписях

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

Слишком большой padding при малых графиках

Приводит к деградации полезной области визуализации:

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

Использование background вместо fill на marks

background не предназначен для стилизации данных. Для этого используются:

  • mark.fill
  • mark.stroke
  • encoding.color

Композиционные паттерны

Dashboard-структура

{
  "background": "#ffffff",
  "padding": 24
}

Характеризуется балансом плотности и читаемости.

Inline-график

{
  "background": "transparent",
  "padding": 0
}

Используется внутри таблиц и карточек.

Presentation-режим

{
  "background": "#000000",
  "padding": 80
}

Акцент на изоляции графика от окружения.

Итоговая модель взаимодействия

Связь параметров можно формализовать так:

  • background определяет внешний визуальный контейнер
  • padding определяет внутреннюю геометрию области отрисовки
  • вместе они задают базовую композицию сцены до применения шкал, осей и marks

Эти параметры формируют фундамент визуального пространства, на котором далее строится вся логика визуализации в Vega и Vega-Lite.

Оглавление