有三種方式，前兩種借助了portMarkup，運(yùn)用上會(huì)一些麻煩，兩種方法的共有步驟如下：

// 創(chuàng)建節(jié)點(diǎn)的時(shí)候都需要加上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時(shí)，監(jiān)聽(tīng)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'))
          // 想要獲取動(dòng)態(tài)值，則通過(guò)args里的node port等相應(yīng)獲取
          container.childNodes[0].innerHTML = 'testsss'  
        }
      },
      
    });

第二步：

// 設(shè)置port時(shí)，在attrs添加fo 設(shè)置port大小方位，添加magnet屬性，true則可以發(fā)出連線
outparams: {
    position: "absolute",
    attrs: {   
      fo: {
        width: 16,
        height: 16,
        x: -8,
        y: -8,
        magnet: 'true',
      },
    }
  },

第三步：

// css設(shè)置添加的節(jié)點(diǎn)的樣式，及hover到port時(shí)顯示port簡(jiǎn)介
.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時(shí)，對(duì)port進(jìn)行屬性設(shè)置，添加label屬性，動(dòng)態(tài)獲取標(biāo)簽內(nèi)容
{
                group: "outparams",
                label: {
                  position: {
                    name : 'bottom',
                    args: {
                      y: 15, // 強(qiáng)制指定 y 坐標(biāo)為 10，替換計(jì)算結(jié)果中的 y 坐標(biāo)
                      attrs: {
                        text: {
                          text: '名稱(chēng)：' + item.name + '\n 類(lèi)型：' + typename, // 標(biāo)簽文本
                          fill: '#ffffff', // 設(shè)置標(biāo)簽顏色為紅色
                        },
                      },
                    },
                  },
                },
                args: {
                  x: seat + '%',
                  y: '100%',
                },
                direction: 'out',
                linkedid: item.constraintId + '-' + item.dataType,
                argId: item.id,
              },

第二步：

// 設(shè)置port大小，方向偏移量，設(shè)置magnet true為可以畫(huà)線
outparams: {
    position: "absolute",
    attrs: {   
      fo: {
        width: 16,
        height: 16,
        x: -8,
        y: -8,
        magnet: 'true',
      },
    }
  },

第三步：

// 根據(jù)dom設(shè)置樣式
.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：與平時(shí)的都一樣，主要是對(duì)port label的樣式進(jìn)行了修改

// port里面添加label
{
                group: "inparams",                
                label: {
                  position: {
                    name : 'top',
                    args: {
                      y: -30, // 強(qiáng)制指定 y 坐標(biāo)為 10，替換計(jì)算結(jié)果中的 y 坐標(biāo)
                      attrs: {
                        text: {
                          text: '名稱(chēng)：' + item.name + '\n 類(lèi)型：' + typename, // 標(biāo)簽文本
                          fill: '#ffffff', // 設(shè)置標(biāo)簽顏色為紅色
                        },
                      },
                    },
                  },
                },
                args: {
                  x: seat + '%',
                  y: 0,
                },
                direction: 'in',
                linkedid: item.constraintId + '-' + item.dataType,
                argId: item.id,
              },

第二步：

// 自定義port的樣式，定義成circle，利用magnet來(lái)定義哪一類(lèi)port可以被當(dāng)做連線起始點(diǎn)
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;
    }
  }
}

總結(jié)：

方式1和方式2會(huì)在對(duì)port連線進(jìn)行校驗(yàn)時(shí)會(huì)出現(xiàn)問(wèn)題，凡是沒(méi)有定義manget屬性的，在validateConnection鉤子函數(shù)中都不會(huì)被校驗(yàn)，所以推薦方法3