connector

概述

Connector 组件用于绘制连接线，可以在两个点之间创建带有路径的连接器。它主要用于流程图、关系图、桑基图等需要展示元素间连接关系的可视化场景。

连接器的路径通常包含以下几个关键点：

起点（Source）：连接的起始位置
终点（Target）：连接的结束位置
中间点：根据偏移量和连接长度计算的路径转折点
端点标记：可选的箭头或标记符号

路径计算逻辑

直角坐标系

在标准的直角坐标系中，连接器会创建一个 L 型路径：

  起点
    ───┐
       │
       │(中间段)
       │
       └── 终点 →

转置坐标系

在转置坐标系中，路径会相应调整：

起点
 │
 │ (中间段)
 │
 └─────── 终点 →

配置项

属性	描述	类型	默认值
offsetX	统一的 X 轴偏移量，同时作用于起点和终点	`number`	`0`
offsetY	统一的 Y 轴偏移量，同时作用于起点和终点	`number`	`0`
sourceOffsetX	起点的 X 轴偏移量	`number`	`offsetX`
sourceOffsetY	起点的 Y 轴偏移量	`number`	`offsetY`
targetOffsetX	终点的 X 轴偏移量	`number`	`offsetX`
targetOffsetY	终点的 Y 轴偏移量	`number`	`offsetY`
connectLength1	连接器的中间段长度	`number`	-
endMarker	是否显示端点标记（箭头）	`boolean`	`true`
style	连接器的样式配置	ConnectorPathStyleProps	-

style

连接器支持所有 Path 元素的样式属性，以及端点标记的样式配置。

属性	描述	类型	默认值
stroke	连接线的颜色	`string`	-
strokeWidth	连接线的宽度	`number`	`1`
strokeOpacity	连接线的透明度	`number`	`1`
strokeDasharray	虚线样式	`string` \| `number[]`	-
fill	填充色（通常用于封闭路径）	`string`	`'none'`
endMarkerSize	端点标记的大小	`number`	-
endMarkerFill	端点标记的填充色	`string`	-
endMarkerStroke	端点标记的描边色	`string`	-

使用示例

基础连接器

使用 connector 标记可以创建基础连接线，连接两个数据点。

import * as G2 from '@antv/g2';

const { Chart } = G2;
const chart = new Chart({
container: 'container',
});

chart.options({
type: 'connector',
data: [
  { source: 'A', target: 'B', x1: 100, y1: 100, x2: 300, y2: 200 },
  { source: 'B', target: 'C', x1: 300, y1: 200, x2: 500, y2: 150 },
  { source: 'C', target: 'D', x1: 500, y1: 150, x2: 400, y2: 300 },
],
encode: {
  x: ['x1', 'x2'],
  y: ['y1', 'y2'],
  color: 'source',
},
style: {
  stroke: '#1890ff',
  strokeWidth: 2,
  endMarker: true,
},
legend: false,
});

chart.render();

组合使用

连接器通常和其他 mark 一起使用：

import * as G2 from '@antv/g2';

const { Chart } = G2;
const chart = new Chart({
container: 'container',
});

// 原始数据
const data = [
{ type: '分类一', value: 27 },
{ type: '分类二', value: 25 },
{ type: '分类三', value: 18 },
{ type: '分类四', value: 15 },
{ type: '分类五', value: 10 },
{ type: 'Other', value: 5 },
];

chart.options({
type: 'view',
children: [
  {
    type: 'interval',
    data: data,
    encode: {
      x: 'type',
      y: 'value',
      color: 'type',
    },
  },
  {
    type: 'connector',
    data: [
      {
        source: '分类一',
        target: '分类三',
        x1: '分类一',
        x2: '分类三',
        y1: 27,
        y2: 18,
      },
    ],
    encode: {
      x: ['x1', 'x2'],
      y: ['y1', 'y2'],
    },
    style: {
      stroke: 'orange',
      strokeWidth: 2,
      sourceOffsetX: 15,
      targetOffsetX: -20,
    },
    legend: false,
  },
],
});

chart.render();

高级用法

响应式连接器

// 根据数据动态调整连接器样式
const connector = new Connector({
  stroke: (d) => (d.type === 'important' ? '#ff4d4f' : '#1890ff'),
  strokeWidth: (d) => d.weight || 1,
  connectLength1: (d) => d.distance || 20,
});

动画连接器

// 带动画效果的连接器
const connector = new Connector({
  stroke: '#1890ff',
  strokeWidth: 2,
  defaultEnterAnimation: 'growIn',
  defaultUpdateAnimation: 'morphing',
  defaultExitAnimation: 'fadeOut',
});

注意事项

坐标系兼容性：当前版本主要支持直角坐标系，极坐标系的支持正在开发中
性能优化：对于大量连接器的场景，建议使用批量渲染或虚拟化技术
路径计算：复杂的路径可能需要自定义 connectorPath 属性
端点标记：默认的端点标记是箭头形状，可通过样式配置修改