В JavaScript (React Flow): Как задать параметры стиля для связей (edges) в графе — толщину линии и паттерн штриховки в зависимости от типа связи?

В React Flow стилизация рёбер (edges) выполняется через несколько механизмов: свойство `style`, атрибут `animated`, а также через кастомные типы рёбер с использованием SVG-атрибутов. Рассмотрим подробно каждый подход.

## 1. Базовая стилизация через свойство `style`

Каждый объект ребра в массиве `edges` поддерживает поле `style`, куда передаются CSS-свойства. Для управления толщиной линии используется `strokeWidth`, для цвета — `stroke`:

js
const edges = [
{
id: ‘e1-2’,
source: ‘1’,
target: ‘2’,
type: ‘strong’,
style: { strokeWidth: 4, stroke: ‘#ff0000’ },
},
{
id: ‘e2-3’,
source: ‘2’,
target: ‘3’,
type: ‘weak’,
style: { strokeWidth: 1, stroke: ‘#aaaaaa’, strokeDasharray: ‘5 5’ },
},
];

Атрибут `strokeDasharray` задаёт паттерн штриховки: `’5 5’` — равные штрихи и пробелы, `’10 3 3 3’` — сложный паттерн.

## 2. Динамическая стилизация в зависимости от типа связи

Чтобы автоматически применять стиль по типу, удобно использовать функцию-маппер:

js
const getEdgeStyle = (type) => {
switch (type) {
case ‘strong’:
return { strokeWidth: 4, stroke: ‘#2563eb’ };
case ‘weak’:
return { strokeWidth: 1, stroke: ‘#94a3b8’, strokeDasharray: ‘6 4’ };
case ‘dashed’:
return { strokeWidth: 2, stroke: ‘#f59e0b’, strokeDasharray: ‘8 4 2 4’ };
default:
return { strokeWidth: 2, stroke: ‘#64748b’ };
}
};

const edges = rawEdges.map((edge) => ({
…edge,
style: getEdgeStyle(edge.type),
}));

## 3. Кастомные рёбра (Custom Edge Components)

Для полного контроля создаётся React-компонент кастомного ребра. Это позволяет использовать SVG-атрибуты напрямую:

jsx
import { getBezierPath, EdgeProps } from ‘reactflow’;

const CustomEdge = ({ id, sourceX, sourceY, targetX, targetY, data }) => {
const [edgePath] = getBezierPath({ sourceX, sourceY, targetX, targetY });
const strokeDasharray = data?.dashed ? ‘8 4’ : ‘none’;
const strokeWidth = data?.weight ?? 2;

return (

);
};

const edgeTypes = { custom: CustomEdge };

Затем передайте `edgeTypes` в компонент «.

## 4. Полезные значения `strokeDasharray`

| Паттерн | Описание |
|—|—|
| `’5 5’` | Равномерная пунктирная линия |
| `’10 5’` | Длинные штрихи |
| `’2 4’` | Мелкая точечная линия |
| `’10 4 2 4’` | Штрих-пунктир |

## Итог

Для простых случаев достаточно поля `style` с `strokeWidth` и `strokeDasharray`. Для сложной логики — кастомные компоненты рёбер дают полный контроль над SVG-рендерингом.