vis-network中添加一个新的label

先写个方法

customDrawNode(ctx, x, y) {
      const label ='swap';
      const fontSize = 6;


 //画图片
     // var image = new Image();
//image.src = "swap.png";
// image.onload = function() {
  // 绘制图片
 // ctx.drawImage(image, x-13.2, y-13.6, 26, 26);
// };

//画半圆
     // var radius = 10; 
      // var angle = Math.PI /1.3
      // ctx.beginPath();//开始绘制一个新的路径。在绘制之前，通常会调用此方法来清除之前可能存在的路径。
      // ctx.ellipse(x-5, y-6.5, radius,radius/2.3 ,angle,  0, Math.PI,); 
      // ctx.fillStyle = '#ea0e74';
      // // ctx.fillRect(x - 8, y+5 , 15, 6);//矩形左上角的 x 坐标、y 坐标，矩形的宽度和高度
      // // // ctx.lineWidth = 1;
      // // ctx.strokeStyle =  '#2B7CE9';
      // // ctx.strokeRect(x -150, y - 15, 100, 30);
      // ctx.closePath(); //关闭当前路径。在绘制完成后，通常会调用此方法来结束当前路径，可以选择性地将路径首尾连接起来。
      // ctx.fill(); 

    


      // // Draw node box
      ctx.beginPath();//开始绘制一个新的路径。在绘制之前，通常会调用此方法来清除之前可能存在的路径。
      ctx.fillStyle = 'rgba(59, 160, 209,1)';
      ctx.fillRect(x - 8, y+5 , 15, 6);//矩形左上角的 x 坐标、y 坐标，矩形的宽度和高度
      // ctx.lineWidth = 1;
      ctx.strokeStyle =  '#2B7CE9';
      // ctx.strokeRect(x -150, y - 15, 100, 30);
      ctx.closePath(); //关闭当前路径。在绘制完成后，通常会调用此方法来结束当前路径，可以选择性地将路径首尾连接起来。
      
      // // Draw HTML content as text
      ctx.font = `${fontSize}px Arial`;
      ctx.fillStyle = '#fff';
      // ctx.backgroundColor='#f00'
      // ctx.textAlign = 'center';
      // ctx.textBaseline = 'middle';
      ctx.fillText(label, x-8, y+6);//绘制填充的文本
    },

在使用vis-network中的afterDrawing事件进行调用

   this.network.on("afterDrawing", (ctx ) => {
        // console.log(ctx);
        // js
        // let graph = JSON.parse(sessionStorage.graph);
        this.data.nodes.forEach(node => {
          const position = this.network.getPositions([node.id])[node.id];
          this.customDrawNode(ctx, position.x, position.y);
        });
      });