关于数据可视化:从0到1实现流程图04连线篇

开始

连线是 X6 中十分重要的一部分，X6 内置了很多实用的连线性能，也提供了优雅的扩大机制，这是相比于其余流程图框架占据绝对优势的中央。本文通过实现流程图的连线性能来一步步介绍 X6 的连线机制。

实现

图形定义

X6 中连线分两种模式，代码生成的和用户手动拖拽而成，首先来看怎么通过代码建设连线：

// source 或 target 是坐标点
graph.addEdge({source: [0, 0],
  target: [100, 100]
})


// source 或 target 是节点对象
graph.addEdge({
  source: sourceNode,
  target: targetNode,
})

// source 或 target 是节点 ID
graph.addEdge({
  source: 'sourceId',
  target: 'targetId',
})

// source 或 target 是连贯桩
graph.addEdge({source: { cell: 'cellId1', port: 'portId1'},
  target: {cell: 'cellId2', port: 'portId2'}
})

如果想通过手动操作来创立连线，须要有两个条件：

1. 须要从具备 magnet: true 属性的元素上能力手动拖拽出连线
2. 须要在全局 connecting 配置中自定义 createEdge 办法

import {Graph, Shape} from '@antv/x6'

const graph = new Graph({
  connecting: {createEdge() {return new Shape.Edge()
    },
  },
})
graph.addNode({
  shape: 'rect',
  x: 100,
  y: 100,
  width: 80,
  height: 40,
  attrs: {
    body: {
      stroke: 'red',
      magnet: true
    }
  }
})
graph.addNode({
  shape: 'rect',
  x: 400,
  y: 100,
  width: 80,
  height: 40,
  attrs: {
    body: {
      stroke: 'red',
      magnet: true
    }
  }
})

默认的连线款式并不难看，咱们常常须要本人来定义连线的款式，其实连线和图形都是由 markup 和 attrs 来定义的，默认连线的 markup 为：

[
  {
    tagName: 'path',
    selector: 'wrap',
    groupSelector: 'lines',
    attrs: {
      fill: 'none',
      cursor: 'pointer',
      stroke: 'transparent',
      strokeLinecap: 'round',
    },
  },
  {
    tagName: 'path',
    selector: 'line',
    groupSelector: 'lines',
    attrs: {
      fill: 'none',
      pointerEvents: 'none',
    },
  },
]

其中 line 为理论展现的连线，wrap 是为了不便响应交互的占位元素。个别场景咱们不须要去自定义连线的 markup，然而咱们常常须要配置 attrs 来定制连线款式：

graph.addEdge({
    source: 'sourceId',
  target: 'targetId',
  attrs: {
    line: {
      stroke: '#000',  // 连线色彩
      strokeWidth: 1,  // 连线宽度
    },
  },
})

连线的箭头也是非常容易配置，比方咱们想将下面箭头批改为实心箭头，并且显示的修长一点儿：

graph.addEdge({
  source: 'sourceId',
  target: 'targetId',
  attrs: {
    line: {
      stroke: '#000',
      strokeWidth: 1,
      targetMarker: {
        name: 'block',
        width: 12,
        height: 8,
      }
    },
  },
})

和节点相似，动静批改连线的属性形式如下：

const edge = graph.addEdge({
  source: 'sourceId',
  target: 'targetId',
  attrs: {
    line: {
      stroke: '#000',
      strokeWidth: 1,
    },
  },
})

edge.attr('line/stroke', '#ccc')

同样，连线也提供了注册自定义连线的形式来解决反复定义问题：

Graph.registerEdge('custom-edge', {
  inherit: 'edge',
  attrs: {
    line: {
      strokeWidth: 1,
      stroke: '#5755a1',
      targetMarker: {
        name: 'path',
        d: 'M5.5,15.499,15.8,21.447,15.8,15.846,25.5,21.447,25.5,9.552,15.8,15.152,15.8,9.552z',
      }
    },
  },
})

graph.addEdge({
  shape: 'custom-edge',
  source: [50, 50],
  target: [300, 50],
})

graph.addEdge({
  shape: 'custom-edge',
  source: [50, 150],
  target: [300, 150],
  attrs: {
    line: {stroke: '#31d0c6'}
  }
})

路由和连接器

在每一种图场景中，连线状态有所不同，比方流程图和思维导图的连线款式：

流程图的连线是横平竖直的，思维导图的连线是一种树状，X6 提供了路由和连接器两个概念来实现不同状态的连线。路由就是在原有连线根底上减少一些固定点，让连线合乎某种规定，比方 orth 路由，减少固定点后，边的每一条线段都是程度或垂直的正交线段。连接器就是将连线所有点通过肯定规定加工后，产生肯定形态的连线，比方 smooth 连接器，是用三次贝塞尔曲线线连贯终点、路由点和起点。

在咱们的流程图中，须要横平竖直的连线，并且能避开重合的图形，所以抉择 manhattan 路由，而后连线的拐角处须要平滑解决，这里抉择 rounded 连接器。路由和连接器都能够在 connecting 配置中全局配置（对所有连线无效），也能够在一条连线中独自配置：

// 全局配置
const graph = new Graph({
  connecting: {
    router: 'manhattan',
    connector: {
      name: 'rounded',
      args: {radius: 8,}
    }
  }
})

// 独自针对一条边配置
graph.addEdge({
  source: 'sourceId',
  target: 'targetId',
  router: 'manhattan',
  connector: {
    name: 'rounded',
    args: {radius: 8,}
  }
})

终点和起点

连线的终点和起点是由 NodeAnchor 和 ConnectionPoint 独特确定。

1. 终点：从第一个门路点或指标节点的核心（没有门路点时）画一条参考线到源节点的锚点，而后依据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的终点。
2. 起点：从最初一个门路点或源节点的核心（没有门路点时）画一条参考线到指标节点的锚点，而后依据 connectionPoint 指定的交点计算方法，计算参考线与图形的交点，该交点就是边的起点。

下面的形容可能比拟难以了解，能够看上面的例子，图形 1 和 图形 2 的 NodeAnchor 默认在图形核心，ConnectionPoint 默认是 boundary，也就是图形边框，从锚点 1 拉出一条线来连贯到锚点 2，这条线与图形边框的交点就是连线的终点和起点。

常常会遇到这种状况，终点和起点在连贯桩的核心，那么 NodeAnchor 和 ConnectionPoint 该怎么设置呢？

const graph = new Graph({
  // 锚点在连贯桩的核心，连接点是锚点自身
  connecting: {
    anchor: 'center',
    connectionPoint: 'anchor',
  }
})

工具

工具是渲染在节点 / 边上的小部件，用于加强节点 / 边的交互能力，当初咱们须要在连线上减少一个线段工具，在边的每条线段的核心渲染一个工具条，能够拖动工具条调整线段两端的门路点的地位。

graph.addEdge({
  tools: [
    {
      name: 'segments',
      args: {
        attrs: {fill: '#459CDB',}
      }
    }
  ]
})

最初

连线是 X6 的外围性能之一，通过本文能够理解到连线的根底用法，咱们能够实现大部分场景下连线的配置，在一些简单场景下，还须要在连线上定制标签的需要，能够参考 edge-label。

1. 源码：传送门
2. 记得给 X6 仓库加星