Трансформация linkpath

Трансформация linkpath в Vega используется для построения геометрии связей между узлами графа в виде SVG/Canvas-путей. Она преобразует табличные данные с парами “источник–назначение” в набор кривых или ломаных линий, которые могут быть отрисованы как рёбра графа, связи иерархии или дуги сетевых структур.

Ключевая идея трансформации заключается в отделении логики вычисления маршрута линии от логики визуального представления. В результате данные остаются простыми (узлы и связи), а сложная геометрия формируется на этапе трансформации.

Назначение и область применения

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

  • деревья и иерархии (оргструктуры, файловые системы)
  • графы зависимостей
  • сетевые диаграммы
  • force-directed графы
  • диаграммы потоков данных

Главная задача трансформации — превратить дискретные связи в непрерывные пути, пригодные для визуализации через mark типа path или line.

Логика работы трансформации

На вход подаётся набор связей вида:

  • идентификатор источника
  • идентификатор цели
  • координаты узлов (или ссылки на них через layout)

После применения linkpath:

  • вычисляется маршрут соединения
  • формируется поле path
  • результат становится готовым к отрисовке SVG Path

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

В Vega трансформации задаются внутри блока transform:

{
  "type": "linkpath",
  "sourceX": "source.x",
  "sourceY": "source.y",
  "targetX": "target.x",
  "targetY": "target.y"
}

После выполнения появляется новое поле:

  • path — строка SVG path data

Основные параметры

sourceX / sourceY

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

  • могут ссылаться на поля данных
  • часто получаются из layout (force, tree)

Пример:

"sourceX": "source.x",
"sourceY": "source.y"

targetX / targetY

Определяют координаты конечной точки связи.

"targetX": "target.x",
"targetY": "target.y"

orient

Задаёт ориентацию построения пути.

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

  • горизонтальная ориентация (left-right)
  • вертикальная (top-bottom)
  • радиальная (radial layouts)

Типичная роль — согласование с layout-алгоритмом.

shape

Определяет форму линии.

На практике чаще всего используются:

  • line — прямая
  • curve — сглаженная кривая
  • orthogonal — ломаная под прямыми углами

Принцип генерации path

Трансформация выполняет несколько шагов:

  1. Извлекает координаты источника и цели
  2. Определяет ориентацию
  3. Строит контрольные точки (если кривая)
  4. Генерирует SVG path string
  5. Добавляет результат в datum

Результат выглядит как:

M x1,y1 C cx1,cy1 cx2,cy2 x2,y2

или в ломаном варианте:

M x1,y1 L x2,y2

Пример: иерархическое дерево

Для дерева часто используется layout, который уже вычисляет позиции узлов, после чего linkpath соединяет parent-child связи.

{
  "data": { "name": "links" },
  "transform": [
    {
      "type": "linkpath",
      "sourceX": "source.x",
      "sourceY": "source.y",
      "targetX": "target.x",
      "targetY": "target.y",
      "orient": "horizontal",
      "shape": "curve"
    }
  ]
}

Результат — плавные дуги между узлами дерева.

Пример: граф зависимостей

В сетевых графах координаты могут приходить из force layout.

{
  "type": "linkpath",
  "sourceX": "source.x",
  "sourceY": "source.y",
  "targetX": "target.x",
  "targetY": "target.y",
  "shape": "line"
}

Здесь связи остаются прямыми, так как важно подчеркнуть структуру, а не визуальную плавность.

Интеграция с layout-трансформациями

linkpath почти всегда используется совместно с layout-алгоритмами:

  • force simulation
  • tree layout
  • stratify
  • pack / cluster

Типичный pipeline:

  1. stratify → строит иерархию
  2. tree → вычисляет координаты
  3. linkpath → соединяет узлы

Взаимодействие с mark path

Результат трансформации напрямую используется в mark:

{
  "type": "path",
  "from": { "data": "links" },
  "encode": {
    "update": {
      "path": { "field": "path" },
      "stroke": { "value": "#999" }
    }
  }
}

Поле path становится источником геометрии.

Работа с направленными связями

При направленных графах важно различать источник и цель.

linkpath сохраняет направление, что позволяет:

  • рисовать стрелки
  • управлять направлением кривой
  • корректно строить иерархии

Стрелки обычно добавляются отдельно через marks или символы на конце пути.

Особенности кривых

При shape: curve алгоритм создаёт контрольные точки, зависящие от ориентации:

  • горизонтальные связи сглаживаются по оси X
  • вертикальные — по оси Y

Это снижает визуальную перегруженность графов с большим количеством рёбер.

Производительность

При большом количестве связей трансформация остаётся линейной:

  • сложность: O(n)
  • каждая связь обрабатывается независимо

Узкие места чаще возникают не в linkpath, а в:

  • layout-алгоритмах
  • рендеринге SVG

Типичные ошибки

Отсутствие координат

Если sourceX или targetY не определены, путь не будет построен.

Несогласованность layout

Если узлы и связи берутся из разных источников координат, линии будут “разъезжаться”.

Неверный ориентир

При несоответствии orient layout-у:

  • дерево может выглядеть “сломано”
  • кривые будут направлены некорректно

Роль в архитектуре Vega

linkpath выполняет промежуточную роль между:

  • структурными данными (graph model)
  • визуальными примитивами (path marks)

Это типичный пример декларативной геометрической трансформации, где:

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