Именованные стили: поле style

Vega и Vega-Lite поддерживают механизм именованных стилей (named styles), который реализуется через поле style в описании графических примитивов и через секцию конфигурации config.style. Этот механизм служит для многократного переиспользования визуальных параметров без дублирования кода и позволяет строить иерархию оформления поверх базовых настроек mark-типа.

Vega Vega-Lite

Поле style задаёт именованный набор визуальных правил, который применяется к mark-элементу поверх базового описания mark.

В общем виде:

{
  "type": "circle",
  "style": "highlight"
}

или множественные стили:

{
  "type": "circle",
  "style": ["highlight", "emphasis"]
}

Ключевые свойства механизма

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

Именованные стили в конфигурации

Именованные стили объявляются в секции config.style. Это центральный механизм переиспользования визуальных правил.

Базовая структура

{
  "config": {
    "style": {
      "highlight": {
        "fill": "orange",
        "stroke": "black",
        "strokeWidth": 2
      },
      "muted": {
        "opacity": 0.3
      }
    }
  }
}

Применение стилей

{
  "data": { "url": "data.csv" },
  "mark": "circle",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "y", "type": "quantitative" }
  },
  "style": "highlight"
}

Механика наложения стилей

Система стилей в Vega/Vega-Lite строится как каскад:

  1. базовый mark-тип (например, circle)
  2. глобальные настройки config.mark
  3. именованные стили config.style.<name>
  4. локальные свойства mark
  5. encoding (имеет приоритет над визуальными атрибутами mark)

Таким образом, style работает как промежуточный слой между глобальной темой и конкретной визуализацией.

Множественные стили и композиция

Несколько стилей применяются последовательно:

{
  "mark": "point",
  "style": ["interactive", "selected"]
}

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

{
  "config": {
    "style": {
      "interactive": {
        "cursor": "pointer",
        "fillOpacity": 0.8
      },
      "selected": {
        "stroke": "red",
        "strokeWidth": 3
      }
    }
  }
}

Итоговое поведение

  • interactive добавляет интерактивные визуальные свойства
  • selected переопределяет обводку
  • итоговый mark получает объединённый набор атрибутов

Различие между Vega и Vega-Lite в работе со стилями

Vega-Lite

Vega-Lite использует style как высокоуровневый механизм тематизации. Он интегрирован в компиляцию спецификации в Vega.

Особенности:

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

Vega

Vega предоставляет более низкоуровневый контроль:

  • style напрямую влияет на marks
  • поддерживаются пользовательские mark types
  • возможна более сложная композиция стилей

Стиль как именованный слой темы

В Vega-Lite стили часто используются для создания дизайн-системы визуализаций.

Пример тематической структуры

{
  "config": {
    "style": {
      "axis-style": {
        "labelFontSize": 12,
        "titleFontSize": 14
      },
      "chart-primary": {
        "fill": "#4C78A8"
      },
      "chart-secondary": {
        "fill": "#F58518"
      }
    }
  }
}

Применение:

{
  "mark": "bar",
  "style": "chart-primary"
}

Наследование и переопределение

Система стилей подчиняется строгим правилам приоритета.

Приоритеты

  1. encoding (максимальный приоритет)
  2. локальные свойства mark
  3. style
  4. config.mark
  5. дефолтные значения Vega

Пример конфликта

{
  "mark": {
    "type": "circle",
    "color": "blue"
  },
  "style": "highlight",
  "encoding": {
    "color": { "value": "green" }
  }
}

Результат:

  • цвет будет зелёным (encoding перекрывает style)
  • остальные свойства берутся из highlight

Использование style для состояний интерфейса

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

Состояние “hover”

{
  "config": {
    "style": {
      "hover": {
        "fill": "red",
        "strokeWidth": 2
      }
    }
  }
}

Состояние “inactive”

{
  "config": {
    "style": {
      "inactive": {
        "opacity": 0.2
      }
    }
  }
}

Применение

{
  "mark": "point",
  "style": "inactive"
}

Интеграция со слоями (layered charts)

В многослойных визуализациях style позволяет централизованно управлять визуальной иерархией.

{
  "layer": [
    {
      "mark": { "type": "line", "style": "series" }
    },
    {
      "mark": { "type": "point", "style": "highlight" }
    }
  ]
}

Практическая роль style в архитектуре спецификаций

Механизм именованных стилей решает задачу разделения:

  • структуры данных (data + encoding)
  • логики визуального представления (mark)
  • темизации (config.style)

Архитектурный эффект

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

Отличие style от mark config

Механизм Область Назначение
mark локальный конкретная диаграмма
config.mark глобальный дефолт для всех marks
config.style тематический именованные наборы стилей
style связующий выбор темы для mark

Композиция тем через style

Стилевые группы могут использоваться как строительные блоки тем:

{
  "config": {
    "style": {
      "base": {
        "font": "sans-serif"
      },
      "dark": {
        "fill": "#222",
        "stroke": "#eee"
      },
      "accent": {
        "fill": "#ffcc00"
      }
    }
  }
}

Комбинирование:

{
  "mark": "rect",
  "style": ["base", "dark", "accent"]
}

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

Если style указывает на несуществующее имя:

  • Vega/Vega-Lite игнорирует стиль
  • применяется только базовая конфигурация
  • ошибок валидации может не возникать, но визуализация остаётся без изменений

Использование style в масштабируемых системах визуализации

В крупных системах визуализации style становится механизмом:

  • дизайн-токенов
  • темизации дашбордов
  • переключения режимов отображения (light/dark/high-contrast)
  • унификации графиков в продукте

Типичный паттерн:

  • базовая тема (config.mark)
  • слой бренда (config.style.brand)
  • слой контекста (config.style.dashboard)
  • слой состояния (config.style.state)

Связь с декларативной природой Vega

Механизм style усиливает декларативность:

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

Это позволяет отделять намерение визуализации от её исполнения на уровне runtime системы Vega.

Оглавление