Оси

Оси показывают пространственное отображение значений шкалы с помощью делений, линий сетки и подписей. Сейчас Vega поддерживает оси в декартовой (прямоугольной) системе координат. Как и шкалы, оси можно задавать на верхнем уровне спецификации или внутри группового примитива.

Свойства оси

Свойства для настройки координатной оси.

Свойства доступности ≥ 5.11

При выводе SVG эти свойства определяют атрибуты ARIA, которые помогают вспомогательным технологиям описывать ось.

Темы и конфигурация

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

Расположение оси

Допустимые значения параметра orient.

Пользовательские кодировки оси

С помощью параметра encode можно настраивать свойства примитивов всех элементов оси:

• axis — группа оси;
• ticks — примитивы линий делений;
• grid — примитивы линий сетки;
• labels — текстовые примитивы подписей;
• title — текстовый примитив заголовка;
• domain — примитив линии оси.

Каждый элемент принимает набор правил визуального кодирования, сгруппированных в объекты enter, update, exit и другие, как описано в разделе «Примитивы». Для оформления можно использовать стандартные ссылки на значения.

Каждый блок encode также может содержать строковое свойство name для уникального имени набора примитивов, логическое interactive для обработки событий ввода и строковое свойство style (или массив строк) для применения значений свойств по умолчанию. Если не указано иное, для заголовка используется стиль "guide-title", а для подписей — "guide-label".

Каждому делению, линии сетки и подписи соответствует объект данных со следующими полями. Их можно использовать в пользовательских правилах визуального кодирования:

• label — текст подписи;
• value — значение данных;
• index — дробный индекс деления (0 для первого, 1 для последнего);
• tickIndex — целочисленный индекс деления (0 для первого, затем увеличивается на 1 для каждого следующего). ≥ 6.3

В примере ниже показано, как задать собственные цвета, толщину линий, угол поворота текста и шрифты. Блок labels также делает подписи оси чувствительными к событиям ввода и меняет цвет текста при наведении указателя.

"axes": [
  {
    "orient": "bottom",
    "scale": "x",
    "title": "Ось X",
    "encode": {
      "ticks": {
        "update": {
          "stroke": {"value": "steelblue"}
        }
      },
      "labels": {
        "interactive": true,
        "update": {
          "text": {"signal": "format(datum.value, '+,')"},
          "fill": {"value": "steelblue"},
          "angle": {"value": 50},
          "fontSize": {"value": 14},
          "align": {"value": "left"},
          "baseline": {"value": "middle"},
          "dx": {"value": 3}
        },
        "hover": {
          "fill": {"value": "firebrick"}
        }
      },
      "title": {
        "update": {
          "fontSize": {"value": 16}
        }
      },
      "domain": {
        "update": {
          "stroke": {"value": "#333"},
          "strokeWidth": {"value": 1.5}
        }
      }
    }
  }
]

Для labels можно задать собственный текст через свойство "text". Например, порядковая шкала может служить таблицей соответствия между значениями оси и текстом её подписей.