1. 定义：

链接桩是节点上的固定连接点，很多图应用都有链接桩，并且有些应用还将链接桩分为输入链接桩和输出连接桩。

1. 创建连接桩

（1）默认样式

{tagName: 'circle',selector: 'circle',attrs: {r: 10,fill: '#fff',stroke: '#000',},
}

（2）自定义样式

使用链接桩分组来定义链接桩样式，使该组中的链接桩具有相同的行为和样式。具体的属性及参数配置见官网：https://antv-x6.gitee.io/zh/docs/tutorial/basic/port

graph.addNode({id: item.id || "",shape: "custom-vue-node", // 指定用何种图形，默认值 'rect'，这里使用的vue自定义节点x: 0,y: 0,width: 165,height: 370,angle: 0,zIndex: 99,ports: {groups: {// 输入链接桩群组定义inPort: {position: {name: "line", //连接桩位置按照指定线分布，其他取值还有//1、left,right,top,bottom//2、line:沿着指定线//3、.ellipse:沿椭圆弧分布//4、ellipseSpread:沿椭圆均匀分布args: {start: { x: 0, y: 28 + 169 + 25 + 10 },end: { x: 0, y: 28 + 169 + 25 + 10 + 140 },},},label: {position: "right",},zIndex: 9999,attrs: {text: {fill: "#bcc9d4",fontSize: 12,},circle: {r: 3,magnet: true,stroke: "#fff",strokeWidth: 2,fill: "#4c4f55",},},},//输出连接桩定义outPort: {position: {name: "line",args: {start: { x: 165, y: 60 },end: { x: 165, y: 140 },},},zIndex: 9999,attrs: {text: {fill: "#bcc9d4",fontSize: 12,},circle: {r: 3,magnet: true,stroke: "#fff",strokeWidth: 2,fill: "4c4f55",},},},},items: [{id: "action-1",group: "inPort",attrs: {text: {text: "请求数据接口",},},},{id: "action-2",group: "inPort",attrs: {text: {text: "导入数据接口",},},},{id: "action-3",group: "inPort",attrs: {text: {text: "移动",},},},{id: "action-4",group: "inPort",attrs: {text: {text: "显示",},},},{id: "action-5",group: "inPort",attrs: {text: {text: "隐藏",},},},{id: "action-6",group: "inPort",attrs: {text: {text: "切换显隐状态",},},},{id: "event-1",group: "outPort",attrs: {text: {text: "当数据接口请求完成时",},},},{id: "event-2",group: "outPort",attrs: {text: {text: "当数据接口请求失败时",},},},{id: "event-3",group: "outPort",attrs: {text: {text: "当被点击时",},},},],},});

效果图如下：

1. 连接桩交互

官网没有提供属性来设置连接桩分类为输入桩和输出桩，但是提供了几个方法来进行连线限制，如下：

（1）validateMagnet

点击 magnet 时 根据 validateMagnet 返回值来判断是否新增边，触发时机是 magnet 被按下，如果返回 false，则没有任何反应，如果返回 true，会在当前 magnet 创建一条新的边。

validateMagnet({ e, magnet, view, cell }) {console.log(magnet, 'validateMagnet----');if (!magnet) return false;const port = magnet.getAttribute('port-group');if (!['outPort'].includes(port)) {return false;}return true},

（2）validateConnection

在移动边的时候判断连接是否有效，如果返回 false，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。

validateConnection({sourceMagnet, targetMagnet}) {console.log(sourceMagnet, targetMagnet, 'validateConnection----')if (!targetMagnet || !sourceMagnet) return false;//输入桩限制const inPort = targetMagnet.getAttribute('port-group');if (!['inPort'].includes(inPort)) {return false;}//输出桩限制const outPort = sourceMagnet.getAttribute('port-group');if (['outPort'].includes(outPort)) {return true} else {return false}}

（3）validateEdge

当停止拖动边的时候根据 validateEdge 返回值来判断边是否生效，如果返回 false, 该边会被清除。

validateEdge({ edge, type, previous }) {return false
}