antv-G6拓扑图的自定义关系图小结

一、需求背景

结合项目需求有如下需求：

• 分为上下两行，类似关系图；
• 自定义node样式；
• 击一个node，再点击另一类别node，生成连线。点击一个node后，再次点击当前node或者点击其他位置，取消选中。直线连接。点击连线，可以删除连线。连线样式有弧度。划上node节点出现弹框

  

二、主要代码实现

import G6 from '@antv/g6';   //引入G6

 

const setG6Topu = ()=>{
         //先清除原有
        if(graphs.current){
            graphs.current.destroy()
        }
        graphs.current = new G6.Graph({
            container: "topologicalCon",
            width: tuopuWidth,
            height: 154,
            linkCenter: true,
            modes: {
                // 根据不同需求设置拓扑图展示/可操作状态
                default: ['click-add-edge','rectNode'],  
                view: [],
            },
            defaultNode: {
                type: "rectNode",
                size: [32,48],
                color: "#008dff",
                style: {
                    fill: "#9EC9FF",
                    // lineWidth: 3
                },
                labelCfg: {
                    
                }
            },
            nodeStateStyles: {
                selected: {
                  stroke: '#f00',
                  lineWidth: 5
                }
              },

            plugins:[tooltip],
            defaultEdge: {
                type: 'polyline',
                style: {
                    radius: 10,
                    offset: 12,
                    stroke: '#40A9FF',
                    lineWidth: 1,
                }
            }
        });
        //添加数据
        graphs.current.data(tpData);
        //切换状态
        if(type=="view" || disableState){
          graphs.current.setMode('view')
        }else{
          graphs.current.setMode('default')
        }
        //加载
        graphs.current.render();
    }
 //self为自定义暂存点数据，getEdgesObj()/getNodeObj()/getEdgesObj等为自定义获取数据方法以及自定义判断
 
 //G6自带核心方法黄色框中标出。
 
 //点击node逻辑：不可连线则清除，可连线则起点保存，终点生成线
 
 
 //鼠标滑过逻辑：有起点下生成跟随鼠标的直需线
 
 //点击线逻辑：有起点下点击则清空，无起点则为单纯点击线（本次需求为删除）
 
 G6.registerBehavior('click-add-edge', {
        // Set the events and the corresponding responsing function for this behavior
        getEvents() {
          return {
            // 'click': 'onClick'
            'node:click': 'onNodeClick', // The event is canvas:click, the responsing function is onClick
            'mousemove': 'onMousemove', // The event is mousemove, the responsing function is onMousemove
            'edge:click': 'onEdgeClick', // The event is edge:click, the responsing function is onEdgeClick
          };
        },
        onNodeClick(ev) {
            //点击node操作
            const node = ev.item;
            const point = { x: ev.x, y: ev.y };
            const model = node.getModel();
            let obg = {...tpData}
            let {nodes=[],edges = []} = obg
            //判断是否已被连线，有则该次清空连线事件
            const hasLined =  getEdgesObj(edges,model.id) 
            if(hasLined){
              if (self.current.addingEdge && self.current.edge) {
                graphs.current.removeItem(self.current.edge);
                self.current.addingEdge = false
                self.current.edge = null
                self.current.id = null 
                return 
              }
              return 
            }
            //判断是否已有暂存点，有则为生成线，无则为生成新连线，做起点暂存
            if (self.current.addingEdge && self.current.edge) {
                const sourceObj =  getNodeObj(nodes,self.current.id)
                const targetObj =  getNodeObj(nodes,model.id)
                //判断起点终点为同一个
                if(sourceObj.addtype == targetObj.addtype){
                    graphs.current.removeItem(self.current.edge);
                    self.current.addingEdge = false
                    self.current.edge = null
                    self.current.id = null 
                    return
                }
                const lineWired =  getEdgesObj(edges,self.current.id,model.id)
                if(lineWired){
                    graphs.current.removeItem(self.current.edge);
                    self.current.addingEdge = false
                    self.current.edge = null
                    self.current.id = null 
                    return 
                }

                
                edges.push({
                    source: self.current.id,
                    target: model.id,
                })
                obg.edges = edges
                seTtpData(obg)
                self.current.addingEdge = false
                self.current.edge = null
                self.current.id = null 
            } else {
                self.current.addingEdge = true
                //添加线
                self.current.edge = graphs.current.addItem('edge', {
                  source: model.id,
                  target: model.id,
                })
                self.current.id = model.id 
            }
        },
        onMousemove(ev) {
            //鼠标在拓扑区域滑动操作
            const point = { x: ev.x, y: ev.y };
            if (self.current.addingEdge && self.current.edge) {
                //有暂存点则修未连接线颜色/样式
                graphs.current.updateItem(self.current.edge, {
                    type: 'line',
                    target: point,
                    style: {
                        lineDash: [2, 2] ,   // 虚线边
                        stroke: '#5FB333',
                    }
                });
            }
        },
        onEdgeClick(ev) {
            //点击线触发事件
            const currentEdge = ev.item;
            if (self.current.addingEdge && self.current.edge === currentEdge) {
                //有暂存点则进行删除暂存操作
                graphs.current.removeItem(self.current.edge);
                self.current.addingEdge = false
                self.current.edge = null
                self.current.id = null 

            }else{
                //没暂存点则删除线
                const node = ev.item
                const model = node.getModel();
                let obg = {...tpData}
                let {edges = []} = obg
                const sourceObj =  getNodeObj(obg.nodes,model.source)
                const targetObj =  getNodeObj(obg.nodes,model.target)
                let list  = []
                edges.forEach(el=>{
                  if(el.source == model.source && el.target == model.target){
                    return 
                  }else{
                    list.push(el)
                  }
                })
                obg.edges = [...list]
                
 //自定义node节点，网上流传两种方式，此种支持G6定义事件，符合实际需求
 
 G6.registerNode('rectNode', {
        draw: (cfg, group) => {
            //根据条件判断可点击/不可点击样式，可不关注
            let styObg = {
                opacity:1,
                fill:'#FFFFFF',
                stroke:'#40A9FF',
                color:'#000000',
                textX:0,
                textY:cfg.addtype != 'top'?-8:15,
                imgX:-8,
                imgY:cfg.addtype != 'top'?2:-20,
            }
            if(disableState || cfg.disabledFlag){
              styObg={
                  opacity:0.3,
                  fill:'#FFFFFF',
                  stroke:'rgba(0,0,0,.25)',
                  color:'rgba(0,0,0,.25)',
                  textX:0,
                  textY:cfg.addtype != 'top'?-8:15,
                  imgX:-8,
                  imgY:cfg.addtype != 'top'?2:-20,
              }
            }
            

            //最外面的那层
          const shape = group.addShape('rect', {
            draggable: true,
            attrs: {
              x: -16,
              y: -24,
              width: 32,
              height: 48,
              fill: styObg.fill, //填充色
              stroke: styObg.stroke, //边框
              radius: 8,
            },
          });
            //里面的那层
          group.addShape('image', {
            attrs: {
                x: styObg.imgX,
                y:styObg.imgY,
                width: 16,
                height: 16,
                img: cfg.img,
                opacity: styObg.opacity,
            },
            name: 'ip-cp-icon',
         });
            //文字
          group.addShape('text', {
            attrs: {
             textAlign: 'center',
              x: styObg.textX,
              y: styObg.textY,
              width: 32,
              height: 12,
              lineHeight: 10,
              fontSize:12,
              text: getLable(cfg.label),
              fill: styObg.color,
            },
          });
          return shape;
        },
    
    });
 
//G6悬浮框

const tooltip = new G6.Tooltip({
    getContent(e) {
      const outDiv = document.createElement('div');
      outDiv.style.minWidth = '180px';
      outDiv.style.maxWidth = '680px';
      let lineObj = getLineObj(e.item.getModel().id)
      outDiv.innerHTML = `
        <h4>${e.item.getModel().CiName || e.item.getModel().id}</h4>
        <div>${相关连线'}:${lineObj.source?lineObj.source+' ——'+ lineObj.target :'-'} </div>`
      return outDiv
    },
    itemTypes: ['node']

  })

　　

 

三、其他补充

• node位置：在node的数据中的x,y属性定义，间隔与高度可动态计算；

• 容易忽略的一点：代码整理删除和修改地方可能有点乱，实现逻辑与思路看下就行；

 

 

四、成品

五、

 

其实，到第四个就完了，占占篇幅而已。