Порядок слоёв и сортировка

В библиотеке Nivo порядок отображения элементов определяется не только структурой данных, но и внутренней системой слоёв (layers), а также правилами отрисовки SVG-элементов. Основное правило: каждый последующий слой перекрывает предыдущий, если элементы пересекаются в пространстве графика.

Порядок слоёв влияет на:

  • визуальную читаемость перекрывающихся элементов;
  • корректность отображения подписей и осей;
  • приоритет интерактивных элементов (tooltip, hover);
  • восприятие стеков и серий данных.

В большинстве компонентов Nivo порядок можно контролировать через:

  • сортировку входных данных;
  • параметры компонентов (keys, indexBy, sortByValue);
  • массив layers;
  • внутренние правила конкретного типа графика.

Разделение: порядок данных и порядок рендера

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

Порядок данных

Определяет:

  • последовательность серий;
  • группировку категорий;
  • порядок вычисления стеков.

Пример подготовки данных:

const data = [
  { month: "Jan", sales: 30, profit: 12 },
  { month: "Feb", sales: 45, profit: 20 },
  { month: "Mar", sales: 25, profit: 10 }
];

Изменение порядка элементов массива влияет на:

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

Порядок рендера

Определяет:

  • какие элементы рисуются поверх других;
  • какие слои имеют приоритет;
  • какие элементы становятся интерактивно доступными первыми.

Bar chart: порядок категорий и серий

В компоненте Bar chart порядок регулируется двумя уровнями: категориями и ключами значений.

Категории (indexBy)

Поле indexBy определяет ось группировки:

indexBy: "month"

Порядок категорий совпадает с порядком массива данных, если не применяется предварительная сортировка.

Серии (keys)

keys={["sales", "profit"]}

Порядок keys влияет на:

  • порядок отображения столбцов внутри группы;
  • порядок стэкинга (при stacked режиме);
  • визуальную приоритетность слоёв.

Stacked и grouped режимы

Stacked bar

В режиме stacking порядок keys становится критическим:

<ResponsiveBar
  data={data}
  keys={["sales", "profit"]}
  groupMode="stacked"
/>

Поведение:

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

Изменение порядка keys полностью изменяет визуальную структуру:

keys={["profit", "sales"]} // меняет композицию стека

Grouped bar

groupMode="grouped"

В этом режиме:

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

Line chart: слои и порядок серий

В Line chart порядок контролируется через:

  • массив data (серии);
  • layers;
  • порядок отрисовки линий.

Порядок серий

const data = [
  {
    id: "sales",
    data: [{ x: 1, y: 10 }, { x: 2, y: 20 }]
  },
  {
    id: "profit",
    data: [{ x: 1, y: 5 }, { x: 2, y: 15 }]
  }
];

Поздние серии рисуются поверх ранних, если не переопределены слои.

Механизм layers

Line chart использует систему слоёв:

layers={[
  "grid",
  "markers",
  "axes",
  "lines",
  "points",
  "slices",
  "legends"
]}

Ключевое правило: порядок элементов массива layers полностью определяет z-index.

  • grid — фоновые линии
  • axes — оси координат
  • lines — основные графики
  • points — точки данных
  • legends — элементы интерфейса

Изменение порядка:

layers={[
  "lines",
  "axes",
  "points",
  "grid"
]}

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

Влияние points и slices

В интерактивных режимах:

  • points часто должны находиться выше lines;
  • slices (hover-зоны) обычно располагаются поверх всех визуальных элементов.

Pie chart: порядок сегментов

В Pie chart порядок напрямую зависит от сортировки значений.

sortByValue

sortByValue: true

При включении:

  • сегменты упорядочиваются по значению;
  • нарушается исходный порядок данных.

При отключении:

  • порядок сегментов совпадает с порядком массива.
const data = [
  { id: "A", value: 30 },
  { id: "B", value: 10 },
  { id: "C", value: 20 }
];

При sortByValue: true визуальная последовательность меняется на:

  • A → C → B (или иной порядок по убыванию/возрастанию)

Влияние порядка на углы

Каждый следующий сегмент строится от конечного угла предыдущего. Следовательно:

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

Scatter plot и точечные диаграммы

В scatter-графиках порядок влияет на:

  • перекрытие точек;
  • визуальную плотность;
  • читаемость кластеров.

Точки отрисовываются в порядке массива:

data={[
  { x: 1, y: 10 },
  { x: 1, y: 12 },
  { x: 1, y: 8 }
]}

Поздние элементы оказываются поверх ранних.

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

Управление слоями через кастомизацию

Nivo предоставляет возможность полного контроля над рендерингом через кастомные layers.

Добавление собственного слоя

const CustomLayer = ({ bars }) => {
  return bars.map(bar => (
    <circle
      key={bar.key}
      cx={bar.x + bar.width / 2}
      cy={bar.y}
      r={4}
      fill="red"
    />
  ));
};

Использование:

layers={[
  "grid",
  "axes",
  CustomLayer,
  "bars",
  "legends"
]}

Правило: положение функции в массиве определяет z-index относительно встроенных слоёв.

Перестановка стандартных слоёв

layers={[
  "bars",
  "grid",
  "axes",
  "legends"
]}

приводит к тому, что:

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

Приоритет отрисовки и SVG-иерархия

Nivo использует SVG, где порядок DOM-элементов определяет перекрытие:

  • последний элемент в DOM перекрывает предыдущие;
  • layers напрямую транслируются в порядок элементов SVG;
  • группы <g> используются для логической сегментации.

Пример структуры:

<g class="grid" />
<g class="axes" />
<g class="bars" />
<g class="legends" />

Сортировка данных перед передачей в Nivo

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

data.sort((a, b) => a.value - b.value);

или для категорий:

data.sort((a, b) => a.month.localeCompare(b.month));

Преимущества:

  • единый контроль порядка;
  • предсказуемость поведения разных компонентов;
  • отсутствие зависимости от внутренних правил визуализации.

Влияние порядка на интерактивность

Порядок слоёв влияет не только на визуализацию, но и на обработку событий:

  • верхние слои перехватывают hover;
  • tooltip зависит от порядка точек;
  • slices могут блокировать события линий или баров.

Особенно критично в:

  • line charts с points;
  • bar charts с hover overlay;
  • pie charts с интерактивными сегментами.

Типовые ошибки при работе с порядком слоёв

Часто встречающиеся проблемы:

  • размещение axes поверх графиков;
  • неправильный порядок keys в stacked bar;
  • включённый sortByValue в pie без учёта UX;
  • конфликт кастомных layers с встроенными;
  • отсутствие контроля порядка точек в scatter.

Такие ошибки приводят к:

  • визуальному шуму;
  • потере читаемости данных;
  • некорректному восприятию величин;
  • перекрытию интерактивных элементов.

Композиция сложных графиков

В составных визуализациях (например, Line + Points + Areas) порядок слоёв становится единственным механизмом управления визуальной иерархией.

Типичная последовательность:

  • grid (фон)
  • areas (заливки)
  • lines (основные кривые)
  • points (акценты)
  • axes (координаты поверх)
  • legends (UI слой)

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

Оглавление