Структура объекта config

Конфигурационный объект в Vega-Lite и Vega представляет собой центральный механизм управления глобальными и локальными визуальными настройками, позволяющий отделять описание данных и логики визуализации от стилистических и поведенческих параметров. Архитектура config построена как иерархическая система наследуемых значений, где общие правила задаются на верхнем уровне, а затем уточняются для конкретных компонентов визуализации.

В основе лежит объект, содержащий набор секций, каждая из которых отвечает за определённую часть визуального представления:

  • настройки компонентов графика (оси, легенды, заголовки)
  • параметры геометрических примитивов (marks)
  • поведение шкал (scales)
  • оформление представления (view)
  • локализация и форматирование (locale)
  • стилистические пресеты (style)

Базовая структура Vega-Lite config выглядит следующим образом:

const config = {
  background: "#ffffff",
  padding: 10,

  axis: {},
  axisX: {},
  axisY: {},

  legend: {},

  title: {},

  view: {},

  scale: {},

  range: {},

  mark: {},

  bar: {},
  line: {},
  area: {},
  point: {},
  rect: {},
  text: {},
  rule: {},

  style: {},

  locale: {}
};

В Vega (низкоуровневом языке) структура расширяется за счёт дополнительных элементов, включая более детальную настройку сигналов и проекций, однако принцип организации config остаётся аналогичным — каскадная система переопределений.

Принцип наследования и приоритетов

Конфигурация работает по принципу каскада:

  1. глобальный config задаёт значения по умолчанию
  2. конфигурация типа mark переопределяет глобальные значения для конкретного типа геометрии
  3. локальные свойства конкретного слоя спецификации имеют наивысший приоритет

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

Базовые параметры верхнего уровня

На верхнем уровне config находятся свойства, влияющие на весь визуальный объект.

background и padding

background: "#f5f5f5",
padding: 20
  • background определяет фон всей визуализации
  • padding задаёт внешние отступы между графиком и границами контейнера

Эти параметры формируют базовую «рамку» визуализации.

Конфигурация осей (axis)

Секция axis управляет отображением координатных осей. Она может быть глобальной или специализированной:

  • axis — общие настройки
  • axisX — настройки оси X
  • axisY — настройки оси Y
axis: {
  labelFontSize: 12,
  titleFontSize: 14,
  grid: true,
  domainColor: "#333",
  tickSize: 5
}

Типичная структура включает:

  • параметры текста (labelFont, labelColor, labelAngle)
  • параметры линий (grid, domain, tick)
  • отступы и размеры (offset, tickSize)

Специализированные axisX и axisY позволяют переопределять поведение по осям:

axisX: {
  labelAngle: -45
},
axisY: {
  grid: true
}

Конфигурация легенды (legend)

Legend config управляет отображением условных обозначений.

legend: {
  orient: "right",
  labelFontSize: 12,
  symbolSize: 100,
  titleFontSize: 13
}

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

  • orient — расположение (left, right, top, bottom)
  • symbolSize — размер маркеров
  • labelFontSize — текст подписи
  • titleFontSize — заголовок легенды

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

Конфигурация шкал (scale)

Scale config определяет поведение отображения данных в визуальные координаты.

scale: {
  bandPaddingInner: 0.1,
  bandPaddingOuter: 0.2,
  pointPadding: 0.5
}

Основные группы настроек:

  • параметры категориальных шкал (band, point)
  • числовые интерполяции (linear, log, pow)
  • временные шкалы (time, utc)

Шкалы в Vega являются одним из ключевых механизмов трансформации данных.

Конфигурация представления (view)

View config определяет базовое поведение холста визуализации.

view: {
  stroke: "#ccc",
  fill: null,
  continuousHeight: 300,
  continuousWidth: 400
}

Часто используемые параметры:

  • stroke — рамка области визуализации
  • fill — заливка фона view
  • width / height (в Vega, частично в Vega-Lite)
  • размеры по умолчанию для непрерывных данных

Конфигурация mark-типов

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

Общая структура

mark: {
  color: "#4c78a8"
},
bar: {
  binSpacing: 2
},
line: {
  interpolate: "linear",
  strokeWidth: 2
},
area: {
  opacity: 0.6
},
point: {
  size: 60
}

Каждый тип mark имеет собственный набор параметров:

  • bar: ширина, отступы, ориентация
  • line: тип интерполяции, толщина линии
  • area: прозрачность, градиенты
  • point: размер, форма
  • rect: закраска, границы
  • text: шрифт, выравнивание
  • rule: толщина, цвет линии

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

Конфигурация стилей (style)

Style config позволяет создавать именованные стилистические наборы, применяемые к отдельным элементам через свойство style.

style: {
  "cell": {
    stroke: "#ddd"
  },
  "guide-label": {
    fontSize: 11,
    fill: "#666"
  },
  "guide-title": {
    fontWeight: "bold"
  }
}

Механизм style работает как система CSS-классов:

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

Конфигурация заголовков (title)

title: {
  fontSize: 16,
  font: "Arial",
  anchor: "start",
  color: "#222"
}

Параметры включают:

  • шрифт и размер
  • выравнивание
  • цвет
  • отступы

Заголовки могут применяться к всему графику и отдельным слоям.

Конфигурация диапазонов (range)

Range config управляет распределением значений шкал в визуальные ресурсы:

range: {
  category: ["#4c78a8", "#f58518", "#e45756"],
  ordinal: ["#72b7b2", "#54a24b", "#eeca3b"],
  ramp: ["blue", "red"]
}

Используется для:

  • цветовых палитр
  • категориальных отображений
  • градиентов

Локализация (locale)

Locale config отвечает за форматирование чисел, дат и подписей.

locale: {
  number: {
    decimal: ".",
    thousands: ","
  },
  time: {
    dateTime: "%Y-%m-%d"
  }
}

Включает:

  • формат чисел
  • формат времени
  • локальные разделители

Конфигурация фасетирования и компоновки

В Vega-Lite config поддерживает параметры для компоновочных операторов:

facet: {
  spacing: 10
},
concat: {
  spacing: 20
},
repeat: {
  spacing: 15
}

Эти параметры управляют:

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

Каскадная модель конфигурации

Конфигурация строится как многоуровневая система переопределений:

  1. config (глобальный уровень)
  2. mark / axis / legend (типовые настройки)
  3. style (именованные стили)
  4. спецификация визуализации
  5. локальные свойства конкретного слоя

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

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

const config = {
  background: "#ffffff",
  padding: 15,

  axis: {
    labelFontSize: 12,
    titleFontSize: 14,
    grid: true
  },

  legend: {
    orient: "bottom"
  },

  mark: {
    color: "#4c78a8"
  },

  line: {
    strokeWidth: 2
  },

  area: {
    opacity: 0.5
  },

  range: {
    category: ["#4c78a8", "#f58518", "#e45756"]
  },

  view: {
    stroke: "#e0e0e0"
  }
};

Такая структура демонстрирует типичное распределение ответственности между секциями config и их взаимодействие через механизм наследования.

Взаимодействие Vega и Vega-Lite config

Vega-Lite использует более высокоуровневую абстракцию, где config влияет на генерацию Vega-спецификации. Vega config, в свою очередь, применяется непосредственно к рендерингу.

Различия проявляются в:

  • уровне детализации
  • наличии signal-конфигураций (Vega)
  • управлении runtime-поведением

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

Оглавление