Канал href: интерактивные ссылки

Роль канала href в модели визуального кодирования

В спецификации Vega-Lite визуальные элементы описываются через систему каналов кодирования (encoding channels), где каждое визуальное свойство связывается с данными. Канал href относится к классу поведенческих каналов, расширяющих визуализацию интерактивностью за пределы графического представления.

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

Ключевая идея:

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

Место href в системе каналов Vega-Lite

Vega-Lite оперирует стандартным набором каналов:

  • позиционные: x, y
  • визуальные: color, size, shape
  • текстовые: text
  • поведенческие: tooltip, href

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

В отличие от tooltip, который отвечает за всплывающую информацию, href изменяет состояние среды (браузера), инициируя навигацию.

Базовая структура использования href

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

{
  "mark": "point",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "y", "type": "quantitative" },
    "href": { "field": "url", "type": "nominal" }
  },
  "data": {
    "values": [
      { "x": 1, "y": 10, "url": "https://example.com/a" },
      { "x": 2, "y": 20, "url": "https://example.com/b" }
    ]
  }
}

В данном примере каждая точка графика становится интерактивной ссылкой.

Типизация канала href

Vega-Lite не требует строгой типизации для href, однако семантически канал работает с текстовыми значениями:

  • nominal — наиболее распространённый вариант
  • ordinal — используется редко, если ссылки структурированы
  • quantitative — практически не применяется, требует преобразования

На практике href почти всегда связывается с полем типа строка.

Механика генерации интерактивности

На уровне компиляции Vega-Lite трансформирует href в Vega-спецификацию событийного поведения. В Vega это реализуется через:

  • обработчики событий (events)
  • пресеты действий (url action)

В упрощённом виде Vega-Lite генерирует логику:

  • при click на mark
  • извлечь значение поля href
  • выполнить переход по URL

Комбинация href с другими каналами

Канал href не существует изолированно и часто комбинируется с визуальными каналами, усиливая смысл данных.

1. Связка с color
"encoding": {
  "x": { "field": "category", "type": "nominal" },
  "y": { "field": "value", "type": "quantitative" },
  "color": { "field": "category", "type": "nominal" },
  "href": { "field": "link" }
}

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

2. Связка с tooltip
"encoding": {
  "x": { "field": "x" },
  "y": { "field": "y" },
  "tooltip": [
    { "field": "name" },
    { "field": "description" }
  ],
  "href": { "field": "url" }
}

Здесь формируется двухуровневая интерактивность: предварительный просмотр и переход.

3. Связка с text
"encoding": {
  "text": { "field": "label" },
  "href": { "field": "url" }
}

Текстовые элементы становятся аналогами гиперссылок в графике.

href в различных типах marks

Поддержка канала зависит от типа визуального элемента.

Point / Circle

Наиболее частое использование. Каждая точка — отдельная ссылка.

Bar

Каждый столбец становится интерактивной областью перехода.

Text

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

Rect

Позволяет создавать кликабельные области (heatmap, календарные диаграммы).

Пример: интерактивная столбчатая диаграмма

{
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" },
    "href": { "field": "docLink", "type": "nominal" }
  },
  "data": {
    "values": [
      { "category": "A", "value": 28, "docLink": "https://site.com/a" },
      { "category": "B", "value": 55, "docLink": "https://site.com/b" },
      { "category": "C", "value": 43, "docLink": "https://site.com/c" }
    ]
  }
}

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

Поведение в браузере

На уровне рендеринга Vega использует SVG или Canvas. Реализация href зависит от режима:

  • SVG: добавление атрибута cursor: pointer и обработчика onclick
  • Canvas: обработка через событийный слой (hit testing)

При клике выполняется стандартная навигация браузера через window.location.

Безопасность и ограничения

Использование href требует соблюдения ограничений:

  • URL должен быть валидным
  • нежелательно использовать динамически сгенерированные небезопасные строки
  • возможны ограничения CSP (Content Security Policy)
  • открытие происходит в том же окне, если не переопределено логикой приложения

Динамическое вычисление href

Vega-Lite поддерживает выражения через calculate и трансформации, что позволяет формировать ссылки на основе данных.

{
  "transform": [
    {
      "calculate": "'https://example.com/item/' + datum.id",
      "as": "url"
    }
  ],
  "encoding": {
    "href": { "field": "url" }
  }
}

Это позволяет строить параметризованные маршруты.

Сравнение с пользовательскими обработчиками событий

Vega предоставляет альтернативу href через on + signal:

  • href — декларативная навигация
  • signals + events — программируемая логика

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

  • компактность
  • декларативность
  • совместимость с Vega-Lite

Ограничения:

  • только переход по URL
  • отсутствие сложной логики

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

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

Семантическая роль в визуализации

Канал href изменяет статус визуализации: из статического представления данных она превращается в навигационный интерфейс. Каждый mark становится точкой входа в информационную систему, а сама диаграмма — слоем маршрутизации между сущностями данных.

Оглавление