Поле labelAngle и labelAlign

Ось и текстовые подписи в Vega-Lite опираются на систему декларативной конфигурации, в которой параметры визуального представления определяют поведение меток без ручного управления DOM. Среди ключевых свойств форматирования осевых подписей выделяются labelAngle и labelAlign, отвечающие за поворот текста и его выравнивание относительно оси.

Параметр labelAngle задаёт угол поворота подписей оси в градусах. Значение применяется ко всем текстовым элементам шкалы и влияет на читаемость при высокой плотности данных или ограниченном пространстве.

В Vega-Lite угол задаётся числом:

{
  "axis": {
    "labelAngle": 45
  }
}

Поведение углов

  • 0 — горизонтальное расположение текста (по умолчанию)
  • -45 — наклон против часовой стрелки
  • 45 — наклон по часовой стрелке
  • 90 — вертикальное отображение

Поворот применяется после вычисления позиции метки на оси. Это означает, что геометрия размещения и трансформация текста разделены: сначала вычисляется layout, затем применяется rotation transform.

Влияние на плотные шкалы

При большом количестве категорий:

  • угол увеличивает читаемость при ограниченной ширине
  • снижает перекрытие меток
  • позволяет уменьшить частоту пропусков (labelOverlap)

labelAlign: управление выравниванием

Параметр labelAlign определяет горизонтальное выравнивание текста относительно его опорной точки после применения поворота.

Допустимые значения:

  • "left"
  • "center"
  • "right"

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

{
  "axis": {
    "labelAngle": 45,
    "labelAlign": "left"
  }
}

Логика выравнивания

Выравнивание влияет на то, как текст «растёт» от точки привязки:

  • left — текст уходит вправо от опорной точки
  • right — текст уходит влево
  • center — симметричное расположение относительно точки

После поворота текста система координат выравнивания остаётся локальной относительно rotated bounding box, а не исходной оси.

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

Комбинация labelAngle и labelAlign критична для читаемости диаграмм с наклонёнными подписями.

Основные закономерности

При увеличении угла:

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

Пример конфигурации для плотной категориальной оси

{
  "axis": {
    "labelAngle": -40,
    "labelAlign": "right",
    "labelOverlap": "greedy"
  }
}

Такой набор снижает перекрытие при длинных категориях и обеспечивает единообразное направление текста.

Поведение в разных ориентациях оси

Горизонтальная ось (X)

  • labelAngle чаще используется для наклона категорий
  • labelAlign компенсирует визуальный «уход» текста вниз

Вертикальная ось (Y)

  • угол применяется реже
  • labelAlign влияет на расстояние от шкалы до текста сильнее, чем сам поворот

Связь с другими параметрами форматирования

labelBaseline

labelAlign часто работает совместно с labelBaseline, который управляет вертикальным выравниванием:

  • top
  • middle
  • bottom

Комбинация:

{
  "axis": {
    "labelAngle": 90,
    "labelAlign": "center",
    "labelBaseline": "middle"
  }
}

даёт строго центрированное вертикальное расположение текста.

labelOverlap

При использовании labelAngle система часто переключается на стратегии обработки пересечений:

  • false — отображение всех меток
  • "greedy" — выборочный показ
  • "parity" — чередование

Поворот текста уменьшает необходимость агрессивного скрытия меток, поскольку изменяет их bounding box.

Практические конфигурации

Диаграмма с длинными категориальными названиями

{
  "axis": {
    "labelAngle": -30,
    "labelAlign": "right"
  }
}

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

Компактная ось с минимальной читаемой перегрузкой

{
  "axis": {
    "labelAngle": 0,
    "labelAlign": "center",
    "labelLimit": 80
  }
}

Подходит для коротких категорий и числовых шкал.

Вертикальная экономия пространства

{
  "axis": {
    "labelAngle": 90,
    "labelAlign": "left"
  }
}

Применяется при ограниченной ширине визуализации.

Особенности интерпретации в Vega и Vega-Lite

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

  • labelAngle становится свойством angle у текстового примитива
  • labelAlign преобразуется в align относительно rotated coordinate system

При этом порядок трансформаций фиксирован:

  1. вычисление позиции tick
  2. применение offset
  3. rotation (labelAngle)
  4. выравнивание (labelAlign)
  5. рендер текста

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

Несогласованность угла и выравнивания

{
  "axis": {
    "labelAngle": 45,
    "labelAlign": "center"
  }
}

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

Избыточный угол на числовых осях

Применение labelAngle к непрерывным шкалам часто не даёт выигрыша, так как числовые значения обычно компактны и равномерно распределены.

Игнорирование зависимости от длины текста

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

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

В responsive-визуализациях Vega-Lite labelAngle остаётся фиксированным, поэтому при изменении размеров контейнера:

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

Комбинации параметров часто подбираются под минимальную ширину отображения, а не под максимальную.

Оглавление