Поле view: настройки области построения

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

Поле view задаёт глобальные свойства области отрисовки (viewport), включая:

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

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

Основные параметры view

width и height

Ключевые параметры определения размеров:

{
  "view": {
    "width": 600,
    "height": 400
  }
}
  • width — ширина области визуализации в пикселях;
  • height — высота области визуализации в пикселях.

Эти значения задают базовую систему координат сцены до применения масштабов (scale) и трансформаций (transform). При отсутствии значений используются значения по умолчанию, зависящие от среды исполнения.

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

{
  "width": 600,
  "height": 400
}

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

Поле padding определяет пространство между границами view и областью отрисовки графических элементов.

{
  "view": {
    "padding": 20
  }
}

Возможные формы задания:

  • число — одинаковый отступ со всех сторон;
  • объект — асимметричные отступы:
{
  "view": {
    "padding": {
      "left": 40,
      "right": 20,
      "top": 10,
      "bottom": 30
    }
  }
}

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

Background: фон области визуализации

Параметр background задаёт цвет или стиль фона всего view-контейнера.

{
  "view": {
    "background": "#f5f5f5"
  }
}

Допускаются:

  • CSS-цвета (#hex, rgb, rgba);
  • прозрачность ("transparent");
  • в расширенных случаях — градиенты через SVG/Canvas-слои (в зависимости от рендерера).

Фон применяется до отрисовки сцены и не участвует в системе координат.

Stroke и оформление границ

Поле stroke и сопутствующие свойства позволяют визуально выделить границу области:

{
  "view": {
    "stroke": "black",
    "strokeWidth": 1
  }
}

Дополнительно могут использоваться:

  • strokeDash — пунктирная линия;
  • strokeOpacity — прозрачность границы;
  • cornerRadius (в некоторых реализациях) — скругление углов контейнера.

Эти параметры чаще применяются в отладочных или демонстрационных целях.

Autosize: стратегия подгонки содержимого

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

{
  "view": {
    "autosize": {
      "type": "fit",
      "contains": "padding"
    }
  }
}

Типы autosize

none

Фиксированные размеры без адаптации:

{
  "view": {
    "autosize": "none"
  }
}

Графика выходит за пределы контейнера при нехватке пространства.

pad

Сохраняет заданные размеры и добавляет отступы при необходимости.

fit

Масштабирует содержимое так, чтобы оно полностью помещалось в view.

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

fit-x / fit-y

Ограниченная адаптация по одной оси:

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

contains

Параметр contains уточняет, как учитывать padding:

  • "content" — только графические элементы;
  • "padding" — включая отступы.

View как система координат

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

  • (0, 0) соответствует левому верхнему углу области;
  • ось X направлена вправо;
  • ось Y направлена вниз (в Canvas-рендерерах).

Все дальнейшие преобразования (scale, translate, rotate) применяются относительно этой системы.

Влияние view на layout

view влияет не только на геометрию, но и на алгоритмы размещения элементов:

  • оси рассчитываются с учётом padding;
  • легенды резервируют пространство внутри или вне view;
  • facet-композиции наследуют размеры контейнера;
  • grid-раскладки масштабируются пропорционально view.

В Vega-Lite многие из этих решений принимаются автоматически, но итоговая спецификация всё равно опирается на view уровня Vega.

Связь с рендерерами

Разные рендереры интерпретируют view по-разному:

  • Canvas — фиксированная пиксельная область, строгая привязка к width/height;
  • SVG — масштабируемая векторная система, где viewBox соответствует view;
  • Headless режим — view определяет экспортируемые размеры изображения.

Динамическое изменение view

В интерактивных сценариях view может изменяться во время выполнения:

  • изменение размеров контейнера DOM;
  • пересчёт autosize при ресайзе окна;
  • реакция на события zoom/pan.

Пример логики обновления:

{
  "view": {
    "width": 800,
    "height": 500,
    "autosize": {
      "type": "fit",
      "resize": true
    }
  }
}

Ограничения и особенности

  • При конфликте width/height и autosize приоритет часто имеет autosize;
  • слишком большие padding значения могут «вытеснить» содержимое;
  • некоторые комбинации SVG-рендеринга и stroke могут визуально увеличивать фактические границы;
  • в Vega-Lite часть настроек view может быть переопределена системой компиляции.

Практическая модель расчёта области

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

  1. Применение width и height;
  2. Вычитание padding;
  3. Применение autosize;
  4. Построение сценического графа;
  5. Финальная отрисовка с учётом transform-матриц.

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

Оглавление