有三种方式，前两种借助了portMarkup，运用上会一些麻烦，两种方法的共有步骤如下：
// 创建节点的时候都需要加上portMarkup属性
let node = graph.createNode({
shape: data.shape,
data: data.data,
portMarkup: [Markup.getForeignObjectMarkup()],
attrs: {
body: { fillOpacity: "0.15", strokeOpacity: "0.6" },
label: { text: data.label, fill: "#2CFEFF" }
},
});
方式1： js为主
第一步：
// 初始化graph时，监听onPortRendered
this.graph = new Graph({
container: container,
onPortRendered(args) {
const selectors = args.contentSelectors
const container = selectors && selectors.foContent
if (container) {
container.setAttribute('class', 'my-port')
// container.style.width = '200px'
// container.style.height = '30px'
// container.style.zIndex = '10000'
container.appendChild(document.createElement('div'))
// 想要获取动态值，则通过args里的node port等相应获取
container.childNodes[0].innerHTML = 'testsss'
}
},
});
第二步：
// 设置port时，在attrs添加fo 设置port大小方位，添加magnet属性，true则可以发出连线
outparams: {
position: "absolute",
attrs: {
fo: {
width: 16,
height: 16,
x: -8,
y: -8,
magnet: 'true',
},
}
},
第三步：
// css设置添加的节点的样式，及hover到port时显示port简介
.my-port {
width: 16px !important;
height: 16px !important;
border: 1px solid #31d0c6;
border-radius: 100%;
background: rgba(44, 254, 255, 0.25);
>div {
color: #ffffff;
display: none;
}
&:hover {
>div {
display: block;
}
}
}
.x6-node foreignObject {
overflow: visible !important;
}
方法2： css为主
第一步：
// addport时，对port进行属性设置，添加label属性，动态获取标签内容
{
group: "outparams",
label: {
position: {
name : 'bottom',
args: {
y: 15, // 强制指定 y 坐标为 10，替换计算结果中的 y 坐标
attrs: {
text: {
text: '名称：' + item.name + '\n 类型：' + typename, // 标签文本
fill: '#ffffff', // 设置标签颜色为红色
},
},
},
},
},
args: {
x: seat + '%',
y: '100%',
},
direction: 'out',
linkedid: item.constraintId + '-' + item.dataType,
argId: item.id,
},
第二步：
// 设置port大小，方向偏移量，设置magnet true为可以画线
outparams: {
position: "absolute",
attrs: {
fo: {
width: 16,
height: 16,
x: -8,
y: -8,
magnet: 'true',
},
}
},
第三步：
// 根据dom设置样式
.x6-port {
.x6-port-body {
width: 16px !important;
height: 16px !important;
border: 1px solid #31d0c6;
border-radius: 100%;
background: rgba(44, 254, 255, 0.25);
}
.x6-port-label {
display: none;
}
&:hover {
.x6-port-label {
display: block;
}
}
}
方法3：与平时的都一样，主要是对port label的样式进行了修改
// port里面添加label
{
group: "inparams",
label: {
position: {
name : 'top',
args: {
y: -30, // 强制指定 y 坐标为 10，替换计算结果中的 y 坐标
attrs: {
text: {
text: '名称：' + item.name + '\n 类型：' + typename, // 标签文本
fill: '#ffffff', // 设置标签颜色为红色
},
},
},
},
},
args: {
x: seat + '%',
y: 0,
},
direction: 'in',
linkedid: item.constraintId + '-' + item.dataType,
argId: item.id,
},
第二步：
// 自定义port的样式，定义成circle，利用magnet来定义哪一类port可以被当做连线起始点
inparams: {
position: "absolute",
attrs: {
circle: {
r: 8,
magnet: "passive",
fill: "#2cfeff",
fillOpacity: "0.25",
stroke: "#2cfeff",
strokeOpacity: "0.6",
strokeWidth: 1,
style: {
visibility: "visible"
}
}
}
},
outparams: {
position: "absolute",
attrs: {
circle: {
r: 8,
magnet: "true",
fill: "#2cfeff",
fillOpacity: "0.15",
stroke: "#2cfeff",
strokeOpacity: "0.6",
strokeWidth: 1,
style: {
visibility: "visible"
},
magnet: 'true',
}
}
},
第三步：
// 修改样式
.x6-port {
.x6-port-label {
display: none;
}
&:hover {
.x6-port-label {
display: block;
}
}
}
总结：
方式1和方式2会在对port连线进行校验时会出现问题，凡是没有定义manget属性的，在validateConnection钩子函数中都不会被校验，所以推荐方法3
