Поле axes

В Vega-Lite оси являются автоматически генерируемыми визуальными компонентами, которые строятся на основе шкал (scales) и каналов кодирования. Поле axis управляет внешним видом и поведением осей непосредственно внутри описания конкретного канала, а глобальная настройка через config.axis, config.axisX, config.axisY позволяет задавать единые правила оформления для всей спецификации.

Оси служат интерфейсным слоем между числовыми или категориальными данными и визуальным представлением. Их основная задача заключается в интерпретации шкал и предоставлении человеку читаемой структуры значений.

Ось в Vega-Lite:

  • интерпретирует домен шкалы (domain)
  • отображает деления (ticks)
  • форматирует подписи (labels)
  • добавляет вспомогательные элементы (grid, domain line)

При этом ось не задаётся явно как отдельный объект графа, а выводится автоматически на основе привязки канала (x, y, color, size и т.д.).

Конфигурация осей на уровне канала

Каждое поле кодирования может содержать объект axis, определяющий локальные параметры отображения.

{
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "category",
      "type": "ordinal",
      "axis": {
        "title": "Категории",
        "labelAngle": -45
      }
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "axis": {
        "title": "Значение",
        "grid": true
      }
    }
  }
}

В данном контексте axis управляет только конкретной осью, не затрагивая остальные визуализации.

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

Заголовок оси

Параметр title определяет текстовое обозначение оси. Он может быть отключён или переопределён:

  • строка — фиксированный заголовок
  • null — скрытие заголовка
"axis": {
  "title": "Объём продаж"
}

Отображение сетки

grid управляет вспомогательными линиями, проходящими через деления шкалы.

"axis": {
  "grid": true
}

Сетка особенно полезна для количественных шкал, где требуется визуальное сопоставление значений.

Подписи делений (labels)

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

"axis": {
  "labels": true
}

Дополнительно используются параметры форматирования:

  • labelAngle — угол поворота подписей
  • labelLimit — максимальная длина текста
  • labelPadding — отступ от оси
  • labelOverlap — стратегия устранения наложений

Форматирование значений

Параметр format позволяет задавать способ отображения числовых и временных значений.

"axis": {
  "format": ".2f"
}

Для временных шкал используется форматирование на основе d3-time-format:

"axis": {
  "format": "%Y-%m"
}

Деления и шаги

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

"axis": {
  "tickCount": 5
}

Также возможна явная фиксация значений:

"axis": {
  "values": [0, 10, 20, 50, 100]
}

Линии домена и делений

Ось включает несколько графических компонентов:

  • domain — основная линия оси
  • ticks — риски делений
"axis": {
  "domain": true,
  "ticks": true
}

Их стилизация:

"axis": {
  "domainColor": "#333",
  "tickColor": "#666"
}

Ориентация осей

Ориентация задаётся автоматически, но может быть переопределена через orient:

  • top
  • bottom
  • left
  • right
"axis": {
  "orient": "top"
}

Ориентация особенно важна при многослойных визуализациях и фасетах.

Поведение осей для различных типов шкал

Непрерывные шкалы (quantitative)

Для числовых данных оси строятся на основе диапазона значений:

  • автоматическое масштабирование
  • интерполяция делений
  • форматирование чисел

Особенно важно взаимодействие с логарифмическими шкалами:

"scale": {
  "type": "log"
}

В этом случае ось отображает экспоненциально распределённые значения.

Временные шкалы (temporal)

Для временных данных ось адаптируется под календарную структуру:

  • месяцы, дни, часы
  • автоматическое уплотнение подписей
  • форматирование по шаблону времени
"axis": {
  "format": "%d %b"
}

Категориальные шкалы (ordinal, nominal)

Для категорий ось строится из дискретных значений:

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

Глобальная конфигурация осей

Помимо локальных настроек, Vega-Lite поддерживает централизованную конфигурацию:

"config": {
  "axis": {
    "labelFontSize": 12,
    "titleFontSize": 14,
    "grid": false
  }
}

Специализированные настройки:

  • axisX — только для горизонтальной оси
  • axisY — только для вертикальной оси
  • axisBand — для band-шкал
  • axisPoint — для point-шкал
"config": {
  "axisX": {
    "labelAngle": -30
  },
  "axisY": {
    "grid": true
  }
}

Приоритет настроек

Иерархия переопределений параметров осей:

  1. encoding.<channel>.axis
  2. config.axisX / axisY
  3. config.axis
  4. значения по умолчанию Vega-Lite

Локальные настройки всегда имеют приоритет над глобальными.

Скрытие осей

Ось может быть полностью отключена:

"axis": null

Также возможно частичное скрытие компонентов:

"axis": {
  "labels": false,
  "ticks": false,
  "domain": false
}

Это часто используется в минималистичных визуализациях или в композиции слоёв.

Сложные конфигурации и многослойные визуализации

При использовании layer или facet оси могут пересекаться или дублироваться. Управление этим осуществляется через:

  • resolve.axis
  • resolve.scale
"resolve": {
  "axis": {
    "x": "shared",
    "y": "independent"
  }
}

Такой подход позволяет объединять графики с различными шкалами без конфликтов визуальных элементов.

Стилизация и типографика

Оси поддерживают расширенные параметры оформления:

  • labelFont
  • titleFont
  • labelColor
  • titleColor
  • labelFontSize
  • titleFontSize
"axis": {
  "labelFontSize": 11,
  "titleFont": "sans-serif",
  "labelColor": "#444"
}

Эти параметры позволяют согласовать оси с общей дизайн-системой визуализации.

Поведение при переполнении и ограничениях

При большом количестве данных оси автоматически применяют стратегии оптимизации:

  • уменьшение количества подписей
  • скрытие перекрывающихся меток
  • поворот текста
  • сокращение формата
"axis": {
  "labelOverlap": "greedy"
}

Работа с нулевыми и пустыми значениями

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

Оглавление