Интерактивность: onClick, onMouseEnter, onMouseLeave

Интерактивность в компонентах Nivo реализуется через событийную модель, встроенную в слои отрисовки (bars, arcs, points, slices). Основные точки взаимодействия: onMouseEnter, onMouseLeave, onClick. Эти обработчики позволяют управлять состоянием визуальных элементов, формировать подсветку, реализовывать выбор элементов и запускать внешние действия на основе данных графика.

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

onMouseEnter: вход в состояние наведения

Событие onMouseEnter срабатывает при попадании курсора на графический элемент: столбец, точку линии, сектор диаграммы.

Типовой сценарий — изменение визуального состояния элемента и отображение дополнительной информации.

Основные особенности

  • передаётся объект элемента (datum)
  • доступ к id, value, data, color
  • часто используется для управления tooltip и highlight

Пример (Bar Chart)

import { ResponsiveBar } from '@nivo/bar';

const MyBar = ({ data }) => (
  <ResponsiveBar
    data={data}
    keys={['value']}
    indexBy="label"
    onMouseEn ter={(datum, event) => {
      console.log('hover enter:', datum.id, datum.value);
    }}
  />
);

Поведение в системе отрисовки

При активации onMouseEnter внутренний state компонента может переключать элемент в режим hover, влияя на:

  • opacity соседних элементов
  • масштабирование активного бара или точки
  • отображение tooltip

onMouseLeave: выход из состояния наведения

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

Основные применения

  • сброс подсветки
  • закрытие tooltip
  • восстановление прозрачности элементов

Пример

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="label"
  onMouseEn ter={(datum) => {
    console.log('enter', datum.id);
  }}
  onMouseLe ave={(datum) => {
    console.log('leave', datum.id);
  }}
/>

Поведенческая модель

После onMouseLeave элемент возвращается к состоянию:

  • базовый цвет серии
  • исходный scale
  • отсутствие выделения

onClick: обработка выбора элементов

onClick является ключевым событием для построения интерактивных аналитических интерфейсов. Используется для:

  • выбора элемента (selection state)
  • фильтрации данных
  • перехода к деталям (drill-down)
  • фиксации активного сегмента

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

Во всех типах графиков callback получает:

  • datum — данные элемента
  • event — DOM-событие

Пример использования onClick в Bar Chart

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="label"
  onCl ick={(datum, event) => {
    console.log('clicked bar:', {
      id: datum.id,
      value: datum.value,
      indexValue: datum.indexValue
    });
  }}
/>

Логика взаимодействия

При клике:

  • элемент фиксируется как активный (если реализовано состояние)
  • остальные элементы могут быть затемнены
  • может инициироваться обновление внешнего состояния (React state)

onClick в Pie Chart

В секторных диаграммах событие работает на уровне arc-сегмента.

import { ResponsivePie } from '@nivo/pie';

const Pie = ({ data }) => (
  <ResponsivePie
    data={data}
    onCl ick={(arc, event) => {
      console.log('arc id:', arc.id);
      console.log('value:', arc.value);
    }}
  />
);

Особенности

  • передаётся arc вместо generic datum
  • доступны поля id, value, percent, color
  • часто используется для фильтрации категорий

onMouseEnter и onMouseLeave в Line Chart

Линейные графики используют point-level интерактивность.

import { ResponsiveLine } from '@nivo/line';

<ResponsiveLine
  data={data}
  onMouseEn ter={(point) => {
    console.log('hover point:', point.data.x, point.data.y);
  }}
  onMouseLe ave={(point) => {
    console.log('leave point');
  }}
/>

Поведение точек

  • активная точка увеличивается
  • линия может подсвечиваться
  • tooltip фиксируется на активном значении

Структура объектов событий

Bar datum

{
  "id": "seriesA",
  "value": 42,
  "indexValue": "January",
  "color": "#ff0000",
  "data": { "label": "January", "value": 42 }
}

Pie arc

{
  "id": "Category A",
  "value": 120,
  "percentage": 35.2,
  "color": "#3366cc"
}

Line point

{
  "data": {
    "x": "Jan",
    "y": 10
  },
  "serieId": "temperature",
  "color": "#00a3ff"
}

Управление состоянием взаимодействий

Интерактивные события в Nivo часто используются совместно с внешним состоянием React.

Паттерн выделения активного элемента

const [active, setActive] = useState(null);

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="label"
  onMouseEn ter={(d) => setActive(d.id)}
  onMouseLe ave={() => setActive(null)}
  onCl ick={(d) => setActive(d.id)}
/>

Влияние состояния на визуализацию

  • фильтрация opacity через fillOpacity
  • условный color mapping
  • масштабирование active элемента

Комбинирование событий

Сложные сценарии интерактивности строятся на комбинации трёх событий:

  • onMouseEnter — вход в фокус
  • onMouseLeave — выход из фокуса
  • onClick — фиксация выбора

Поведенческий сценарий

  1. Наведение → подсветка
  2. Удержание курсора → отображение tooltip
  3. Клик → закрепление состояния
  4. Уход курсора → сброс hover, сохранение selection (если реализовано)

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

const [selected, setSelected] = useState(null);
const [hovered, setHovered] = useState(null);

<ResponsiveBar
  data={data}
  keys={['value']}
  indexBy="label"
  onMouseEn ter={(d) => setHovered(d.id)}
  onMouseLe ave={() => setHovered(null)}
  onCl ick={(d) => setSelected(d.id)}
  opacity={d =>
    selected && selected !== d.id ? 0.3 : 1
  }
/>

Поведение tooltip при событиях

Tooltip в Nivo синхронизируется с событиями:

  • onMouseEnter → открытие tooltip
  • onMouseLeave → скрытие tooltip (если не закреплён)
  • onClick → фиксация tooltip (pin state)

При кастомной реализации tooltip часто используется внешний state:

tooltip={({ datum }) => (
  <div>
    {datum.id}: {datum.value}
  </div>
)}

Сравнение поведения событий по типам графиков

Тип графика onMouseEnter onMouseLeave onClick
Bar datum bar datum bar datum bar
Pie arc arc arc
Line point point point

Практика композиции интерактивных слоёв

Интерактивность в Nivo часто дополняется кастомными слоями (layers), где события используются для:

  • построения overlay-индикаторов
  • динамических линий сравнения
  • crosshair поведения
  • синхронизации нескольких графиков
layers={[
  'grid',
  'axes',
  'bars',
  (props) => {
    return hovered ? (
      <line
        x1={props.xScale(hovered)}
        x2={props.xScale(hovered)}
        y1={0}
        y2={props.height}
      />
    ) : null;
  }
]}
Оглавление