Поле spacing: отступы между видами

В Vega-Lite поле spacing задаёт расстояние между отдельными представлениями (views), когда используется компоновка из нескольких графиков. Речь идёт не о внутреннем отступе внутри одного графика, а о промежутках между элементами композиции: фасетами, горизонтальными и вертикальными конкатенациями, а также повторяющимися панелями.

Ключевая характеристика spacing — глобальное управление плотностью макета многопанельной визуализации. Значение задаётся в пикселях и влияет на визуальное разделение графиков без изменения их внутренних размеров.

Область применения spacing

Facet-компоновка

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

{
  "data": {"url": "data.csv"},
  "facet": {
    "row": {"field": "category", "type": "nominal"}
  },
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "value", "type": "quantitative"}
    }
  },
  "spacing": 20
}

В этом случае spacing: 20 определяет вертикальные промежутки между строками фасетной сетки.

HConcat и VConcat

При горизонтальной и вертикальной конкатенации несколько независимых графиков размещаются в линию или столбец. Здесь spacing задаёт расстояние между соседними визуализациями.

{
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "quantitative"},
        "y": {"field": "b", "type": "quantitative"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "a", "type": "quantitative"},
        "y": {"field": "c", "type": "quantitative"}
      }
    }
  ],
  "spacing": 40
}

Значение 40 увеличивает визуальную дистанцию между двумя графиками, создавая более явное разделение.

Repeat-компоновка

При использовании repeat создаётся набор однотипных графиков, распределённых в сетке. В этом случае spacing регулирует расстояние между повторяющимися панелями.

{
  "repeat": {
    "row": ["A", "B", "C"]
  },
  "spec": {
    "mark": "point",
    "encoding": {
      "x": {"field": "x", "type": "quantitative"},
      "y": {"field": {"repeat": "row"}, "type": "quantitative"}
    }
  },
  "spacing": 15
}

Семантика значения spacing

Единицы измерения

  • задаётся в пикселях
  • применяется как фиксированное расстояние между view-компонентами
  • не масштабируется автоматически при изменении размера контейнера

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

Тип компоновки Роль spacing
facet расстояние между строками и/или колонками фасетной сетки
hconcat горизонтальный промежуток между графиками
vconcat вертикальный промежуток между графиками
repeat расстояние между повторяющимися элементами

Отличие spacing от padding

spacing часто путается с padding, однако эти параметры регулируют разные уровни структуры.

padding

  • управляет внешними отступами внутри одного view
  • влияет на расстояние между графиком и его границами
  • применяется к каждому подграфику отдельно

spacing

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

Влияние на layout и размеры

Фиксация размеров элементов

При увеличении spacing общая площадь визуализации увеличивается без изменения размеров отдельных графиков. Это приводит к:

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

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

При использовании autosize поведение зависит от режима:

  • "pad" — учитывается spacing при расчёте общего размера
  • "fit" — пространство перераспределяется между элементами
  • "none" — spacing может привести к выходу за пределы контейнера

Поведение по умолчанию

Если spacing не указан:

  • применяется значение по умолчанию (обычно 10 пикселей в Vega-Lite)
  • значение может варьироваться в зависимости от версии и типа компоновки
  • для плотных сеток визуализация становится более компактной

Вложенные композиции и наследование spacing

В сложных спецификациях, где используются вложенные facet и concat, spacing применяется на каждом уровне отдельно.

{
  "facet": {
    "row": {"field": "group", "type": "nominal"}
  },
  "spec": {
    "hconcat": [
      {
        "mark": "bar",
        "encoding": {
          "x": {"field": "x", "type": "quantitative"},
          "y": {"field": "y", "type": "quantitative"}
        }
      },
      {
        "mark": "area",
        "encoding": {
          "x": {"field": "x", "type": "quantitative"},
          "y": {"field": "z", "type": "quantitative"}
        }
      }
    ],
    "spacing": 25
  },
  "spacing": 30
}

Здесь:

  • внешний spacing: 30 управляет расстоянием между фасетными строками
  • внутренний spacing: 25 управляет расстоянием между графиками внутри каждой строки

Влияние на визуальную иерархию

Увеличение spacing используется для формирования визуальных групп:

  • малые значения → плотные аналитические панели
  • средние значения → стандартные дашборды
  • большие значения → явно разделённые аналитические блоки

Особенности поведения в сетках

При фасетировании в виде сетки (row × column):

  • horizontal spacing регулирует расстояние между колонками
  • vertical spacing регулирует расстояние между строками
  • если задан один spacing, он может применяться к обоим направлениям симметрично

Ограничения и взаимодействия

  • spacing не влияет на оси и легенды внутри графиков
  • не заменяет padding и не дублирует его функциональность
  • не управляет расстоянием между элементами внутри одного mark
  • не работает с одиночными view без компоновки

Поведение при responsive-рендеринге

В адаптивных контейнерах увеличение spacing может приводить к:

  • уменьшению количества отображаемых колонок (в зависимости от wrapper-а)
  • вертикальному переполнению
  • необходимости перерасчёта размеров каждого view

Связь с визуальными паттернами dashboard-дизайна

В композициях типа дашбордов spacing выступает инструментом:

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

Часто используется вместе с минимальными padding для создания плотных аналитических сеток или с увеличенными значениями для презентационных макетов.

Оглавление