Интерактивность: hover и click по регионам

Визуализации в Nivo строятся вокруг декларативной модели React-компонентов, где каждый график не только отображает данные, но и предоставляет слой взаимодействий поверх визуальных элементов. Для региональных визуализаций (карты, хороплеты, heatmap-подобные слои, диаграммы с областями) ключевую роль играют события hover и click, позволяющие превращать статичную картину в интерактивную систему анализа данных.

Интерактивность в Nivo реализуется через набор стандартных пропсов событий, которые передаются в компонент графика. Эти пропсы пробрасываются на уровень отдельных элементов (bar, arc, region, mesh feature), что обеспечивает точечное управление поведением.

Базовая модель событий в Nivo

Любая интерактивность в Nivo строится вокруг трёх основных событий:

  • onMouseEnter
  • onMouseMove
  • onMouseLeave
  • onClick

Каждое событие получает два ключевых аргумента:

  • объект данных элемента (datum)
  • событие DOM (event)

Пример общей структуры:

onMouseEn ter={(datum, event) => {
    // обработка наведения
}}

onCl ick={(datum, event) => {
    // обработка клика
}}

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

Hover как основной механизм контекстного анализа

Наведение мыши в региональных графиках используется для:

  • подсветки региона
  • отображения tooltip с метриками
  • синхронизации с другими компонентами интерфейса
  • динамического изменения стиля (opacity, color, stroke)

Подсветка региона

Типичный сценарий — изменение визуального состояния элемента при наведении:

const [activeRegion, setActiveRegion] = useState(null);

<ResponsiveChoropleth
    data={data}
    features={features}
    onMouseEn ter={(feature) => setActiveRegion(feature.id)}
    onMouseLe ave={() => setActiveRegion(null)}
    theme={{
        labels: {
            text: {
                fill: '#333'
            }
        }
    }}
/>

Дальнейшая стилизация выполняется через условные функции:

fill: ({ feature }) =>
    feature.id === activeRegion ? '#ff6b6b' : '#4dabf7'

Tooltip как часть hover-механики

Tooltip в Nivo является встроенным механизмом отображения контекстной информации. Он активируется автоматически при hover, но может быть полностью кастомизирован.

Стандартный tooltip:

tooltip={({ feature }) => (
    <div>
        <strong>{feature.properties.name}</strong>
        <div>Значение: {feature.value}</div>
    </div>
)}

Кастомизация часто включает:

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

Hover фактически становится точкой входа в слой аналитики, а не просто визуальным эффектом.

Click как механизм выбора региона

Клик в Nivo чаще всего используется для фиксации состояния. Если hover — это временный контекст, то click — это закреплённый выбор.

Типовые сценарии:

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

Пример обработки клика:

const [selectedRegion, setSelectedRegion] = useState(null);

<ResponsiveChoropleth
    data={data}
    features={features}
    onCl ick={(feature) => {
        setSelectedRegion(feature.id);
    }}
/>

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

const filteredData = allData.filter(
    d => d.regionId === selectedRegion
);

Разделение hover и click состояний

В сложных интерфейсах важно разделять временное и фиксированное состояние:

  • hoverState — временная подсветка
  • selectedState — закреплённый выбор

Пример комбинированной логики:

fill: ({ feature }) => {
    if (feature.id === selectedRegion) return '#fa5252';
    if (feature.id === hoveredRegion) return '#74c0fc';
    return '#ced4da';
}
onMouseEn ter={(feature) => setHoveredRegion(feature.id)}
onMouseLe ave={() => setHoveredRegion(null)}
onCl ick={(feature) => setSelectedRegion(feature.id)}

Такой подход позволяет строить интерфейсы с уровнем взаимодействия, близким к аналитическим системам BI-класса.

Географические регионы и особенности событий

В компонентах вроде ResponsiveChoropleth или ResponsiveGeoMap регионы представлены GeoJSON-объектами. Это влияет на модель взаимодействия:

  • событие привязано к feature, а не к пикселю
  • геометрия может быть сложной (MultiPolygon)
  • попадание курсора определяется через spatial indexing

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

Mesh и слой взаимодействия

Во многих региональных графиках используется mesh-слой, который отвечает за точность hover-детекции.

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

  • повышает точность попадания
  • уменьшает “мертвые зоны”
  • отделяет визуальный слой от интерактивного
<Choropleth
    enableGraticule={true}
    meshEnabled={true}
/>

Mesh часто невидим, но именно он отвечает за корректность событий.

Синхронизация hover между компонентами

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

Пример:

  • карта подсвечивает регион
  • bar chart выделяет соответствующую категорию
  • line chart обновляет временной ряд
const [activeRegion, setActiveRegion] = useState(null);

Передача в разные компоненты:

<GeoMap onHo ver={setActiveRegion} />
<BarChart activeRegion={activeRegion} />
<LineChart filter={activeRegion} />

Так формируется связанная аналитическая сцена, где hover становится глобальным триггером.

Кастомизация поведения событий

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

Пример блокировки tooltip при определённых условиях:

tooltip={(feature) => {
    if (!feature.value) return null;
    return (
        <div>
            {feature.properties.name}: {feature.value}
        </div>
    );
}}

Или подавление клика:

onCl ick={(feature, event) => {
    if (feature.disabled) {
        event.preventDefault();
        return;
    }
    setSelected(feature.id);
}}

Управление визуальным откликом через состояние

Интерактивность в региональных графиках часто реализуется через реактивные стили:

  • opacity для неактивных регионов
  • stroke для выделения границ
  • transform scale для эффекта увеличения
fillOpacity: feature =>
    hoveredRegion && hoveredRegion !== feature.id ? 0.3 : 1
strokeWidth: feature =>
    feature.id === selectedRegion ? 2 : 0.5

Проблемы производительности при интенсивных hover-событиях

При большом количестве регионов возможны узкие места:

  • частые re-render при mousemove
  • перерасчёт стилей
  • обновление tooltip на каждом пиксельном движении

Оптимизация:

  • мемоизация обработчиков через useCallback
  • хранение hover состояния вне тяжёлых компонентов
  • минимизация вычислений в render-функциях
const handleMouseEnter = useCallback((feature) => {
    setHoveredRegion(feature.id);
}, []);

Принципы проектирования интерактивности регионов

Интерактивные модели в Nivo строятся на нескольких устойчивых принципах:

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

Эти принципы позволяют использовать hover и click не как декоративные эффекты, а как основу аналитического взаимодействия с пространственными данными.

Оглавление