Поле sort и zindex у марок

В системах декларативной визуализации Vega и Vega-Lite порядок отображения графических примитивов определяется не только структурой данных, но и несколькими уровнями управления компоновкой. Среди ключевых механизмов выделяются sort и zindex, которые решают разные, хотя и пересекающиеся задачи: упорядочивание элементов внутри одного набора данных и управление слоями визуальных марок.

Модель отрисовки: базовый контекст

В Vega каждая визуализация строится как набор marks — графических примитивов (rect, circle, line, text и т.д.), которые рендерятся последовательно. Порядок отрисовки влияет на перекрытие: последний отрисованный элемент оказывается поверх предыдущих.

Однако прямое следование порядку данных часто недостаточно. В реальных визуализациях требуется:

  • управлять перекрытием элементов внутри одного mark;
  • задавать приоритет отображения между разными слоями;
  • обеспечивать стабильность визуального результата при изменении данных;
  • разделять логический порядок данных и визуальный порядок.

Для этого используются два механизма: sort и zindex.

sort: управление порядком внутри набора данных

Общая идея

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

  • последовательные графики (линии, области);
  • наложение элементов внутри одного слоя;
  • вычисление перекрытий;
  • порядок интерактивных событий (в некоторых сценариях).

Где применяется sort

В Vega sort может быть задан:

  • на уровне преобразований данных (transforms);
  • внутри mark-определений;
  • в биннинге и агрегации;
  • в Vega-Lite через поля sort внутри encoding.

Наиболее частый сценарий — управление порядком отрисовки линий и областей.

Пример: сортировка линий по значению

Если несколько линий рисуются в одном mark (например, через группировку по категории), порядок влияет на то, какая линия окажется сверху при пересечении:

{
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "category"},
    "detail": {"field": "category"},
    "sort": {"field": "category", "order": "ascending"}
  }
}

Здесь sort влияет на порядок обработки групп category. При пересечениях линий это определяет, какая линия визуально «побеждает».

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

Линейные графики

В линиях sort критичен для соединения точек:

  • неправильный порядок приводит к «ломаным» линиям;
  • корректный sort гарантирует монотонный проход по оси.

Area-марки

В областях sort влияет на:

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

Symbol / circle

В точечных графиках влияние слабее, но sort может менять:

  • порядок отрисовки при перекрытии;
  • визуальную «глубину» плотных кластеров.

sort и трансформации данных

sort часто применяется вместе с:

  • window (скользящие вычисления);
  • aggregate (группировка);
  • stack (накопительные диаграммы).

Например, в стековых диаграммах неправильная сортировка приводит к искажению визуальной структуры слоёв.

zindex: управление слоями между марками

Общая идея

zindex определяет слой отрисовки марка относительно других марок, независимо от данных. Это более глобальный механизм по сравнению с sort.

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

Базовое поведение zindex

Каждая марка может иметь числовой zindex:

  • большее значение → выше слой;
  • меньшее значение → ниже слой;
  • при равенстве используется порядок объявления.

Пример многослойной композиции

{
  "layer": [
    {
      "mark": {"type": "area", "zindex": 0},
      "encoding": {
        "x": {"field": "x"},
        "y": {"field": "baseline"}
      }
    },
    {
      "mark": {"type": "line", "zindex": 1},
      "encoding": {
        "x": {"field": "x"},
        "y": {"field": "value"}
      }
    },
    {
      "mark": {"type": "point", "zindex": 2},
      "encoding": {
        "x": {"field": "x"},
        "y": {"field": "value"}
      }
    }
  ]
}

Здесь:

  • area находится внизу;
  • line поверх области;
  • points всегда сверху.

zindex в интерактивных визуализациях

zindex особенно важен при:

  • hover-эффектах;
  • выделении выбранных элементов;
  • динамическом изменении прозрачности;
  • комбинировании нескольких overlay-слоёв.

Например, при наведении выделенная линия может временно получать повышенный zindex, чтобы перекрывать остальные графики.

Ключевое различие sort и zindex

Локальность vs глобальность

  • sort — локальный порядок внутри данных одного mark;
  • zindex — глобальный порядок между марками.

Семантика

Механизм Назначение Уровень
sort порядок элементов данных внутри mark
zindex порядок слоёв визуализации между marks

Поведение при пересечениях

  • sort влияет на геометрию построения (особенно line/area);
  • zindex влияет на визуальное перекрытие уже построенных объектов.

Взаимодействие sort и zindex

Эти механизмы не заменяют друг друга и часто работают совместно:

  1. sort определяет форму и внутреннюю последовательность;
  2. zindex определяет, какая форма окажется сверху.

Например:

  • линия A и линия B корректно построены через sort;
  • но линия B с более высоким zindex всегда будет визуально перекрывать A.

Практические сценарии использования

Сценарий 1: временные ряды с перекрытием

При визуализации нескольких временных рядов:

  • sort обеспечивает корректное соединение точек по времени;
  • zindex управляет тем, какая серия визуально приоритетнее.

Сценарий 2: комбинированные графики

При наложении:

  • area + line + points;
  • каждая марка получает свой zindex;
  • sort используется внутри каждой серии данных.

Сценарий 3: интерактивное выделение

При hover:

  • выбранный элемент получает увеличенный zindex;
  • остальные остаются на базовых слоях;
  • sort не меняется, чтобы не ломать геометрию.

Частые ошибки при использовании

Игнорирование sort в line/area

Приводит к:

  • разрывам линий;
  • «перепрыгиванию» значений;
  • визуальной хаотичности.

Использование zindex вместо sort

Ошибочная попытка исправить порядок данных через слои приводит к:

  • корректной отрисовке слоя,
  • но неправильной геометрии линии или области.

Перегрузка zindex

Избыточное использование:

  • усложняет иерархию слоёв;
  • делает поведение графика трудно предсказуемым;
  • затрудняет поддержку спецификации.

Итоговая модель восприятия

Внутри Vega-экосистемы порядок отрисовки можно рассматривать как двухуровневую систему:

  • Data-level ordering (sort) — формирует геометрию;
  • Render-level ordering (zindex) — формирует слоистость.

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

Оглавление