开始
很多图形都有连接桩的概念，连接桩是节点上固定的点，常用于连线。连接桩的使用方式非常灵活，本文只介绍最佳实践。
实现
连接桩定义
首先来看一个节点四周中心各一个连接桩的节点配置：
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 元素，我们就可以实现很多交互细节，而图编辑应用的难点往往就在于这些交互细节。
