乐趣区

关于数据可视化:从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 仓库加星
退出移动版