关于数据可视化:从0到1实现流程图05连接桩篇

开始

很多图形都有连贯桩的概念，连贯桩是节点上固定的点，罕用于连线。连贯桩的应用形式非常灵活，本文只介绍最佳实际。

实现

连贯桩定义

首先来看一个节点周围核心各一个连贯桩的节点配置：

graph.addNode({  ports:{    groups: {      group1: {        position: 'top',        attrs: {          circle: {            stroke: '#D06269',            strokeWidth: 1,            r: 4,            magnet: true          }        }      },      group2: {        position: 'right',        attrs: {          circle: {            stroke: '#D06269',            strokeWidth: 1,            r: 4,            magnet: true          }        }      },      group3: {        position: 'bottom',        attrs: {          circle: {            stroke: '#D06269',            strokeWidth: 1,            r: 4,            magnet: true          }        }      },      group4: {        position: 'left',        attrs: {          circle: {            stroke: '#D06269',            strokeWidth: 1,            r: 4,            magnet: true          }        }      }    },    items: [      { group: 'group1' },      { group: 'group2' },      { group: 'group3' },      { group: 'group4' }    ]  }})

上面具体解释下面要害配置项：

group：group 选项来设置链接桩分组，使该组中的链接桩具备雷同的行为和款式，在 items 外面增加连贯桩的时候，能够指定该连贯桩属于哪个分组。
position：每一个分组内能够配置连贯桩的地位属性，地位反对相对定位以及均匀分布定位，具体配置可参考 PortLayout。
attrs：这里又呈现 attrs 了，那么必然有与其配对的 markup，连贯桩默认的 markup 为：
```
{  tagName: 'circle',  selector: 'circle',  attrs: {    r: 10,    fill: '#fff',    stroke: '#000',  },}
```
markup 定制连贯桩的构造，attrs 定制连贯桩的款式，留神，只有设置 magnet: true 属性的连贯桩能力手动连线。
items：group 只是定义了连贯桩分组，也就是 group1 、group2、group3、group4 别离长成什么样子，真正配置须要哪些连贯桩的是 items 属性，items 的配置如下：
```
{  id: 'id1',  group: 'group1',  markup: undefined,  attrs: undefined,}
```
如果 id 不设置，会主动生成惟一 id，如果手动设置，记住，必须保障全局惟一，否则会产生不可预期的谬误。在 items 中配置的 markup 或 attrs 会和所属 group 中的配置深度合并。
动静批改属性
那么怎么动静批改连贯桩的属性呢？在后面的节点和连线中咱们晓得，动静批改款式应用的是 attr 办法，那么 attr 办法的原理是什么呢？
通过浏览源码晓得，attr 办法其实是一个批改节点或边中 store/data/attrs 中数据的快捷办法。

从上图可知，ports 相干的配置并不处于 attrs 属性外部，所以批改连贯桩的配置不能应用 attr 办法，那只有应用更通用的 prop 办法, prop 能够用来批改 store/data 中的任意数据，例如，须要批改第一个连贯桩的边框色彩为红色：

node.prop('ports/items/0/attrs/circle', { stroke: 'red' })

这么写会显得特地简短，X6 提供了更简略一点的办法：

node.portProp('portId', 'attrs/circle', { stroke: 'red' })

显示/暗藏

在业务场景中，常常须要鼠标移入节点时显示连贯桩、鼠标移出节点时暗藏连贯桩的性能。这里就要波及到 X6 的事件零碎，X6 中基本上所有操作都会触发对应的事件，不便用户解决本人的逻辑，具体内容见 Events 。实现这个性能，咱们能够：监听节点的鼠标移入和移出事件，而后通过款式来显示/暗藏连贯桩，这就是基于 SVG 的一个非常明显的劣势，咱们能够应用相熟的 DOM 操作来操作 SVG 元素。

function showPorts(ports, show) {  for (let i = 0, len = ports.length; i < len; i = i + 1) {    ports[i].style.visibility = show ? 'visible' : 'hidden'  }}graph.on('node:mouseenter', () => {  const ports = container.querySelectorAll('.x6-port-body')  this.showPorts(ports, true)})graph.on('node:mouseleave', () => {  const ports = container.querySelectorAll('.x6-port-body')  this.showPorts(ports, false)})

最初

基于 SVG 的图框架最大的劣势在于咱们能够应用相熟的解决 HTML 元素的思维形式来解决 SVG 元素的交互，因为能够应用 DOM API 来操作 SVG 元素，咱们就能够实现很多交互细节，而图编辑利用的难点往往就在于这些交互细节。

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

开始

实现

连贯桩定义

动静批改属性

显示/暗藏

最初