vue前端 antv/G6 根据后台返回的数据 绘制二叉树

一、npm安装

npm install --save @antv/g6

二、相应位置引入

import G6 from '@antv/g6';

三、后台传回的数据示例

Array(2)  //两棵树
	0:
		feature: (...)
		feature_party: (...)
		left: Object   //左子树  
		right: Object  //右子树  子树的结构和0一样，有左右子树，直到叶子结点
		w: (...)

四、方法：（重点）
1、渲染数据

 xgbForEachFunc(trees){      //传一棵树
     if(trees.left || trees.right){  //如果存在子节点
       trees.label = trees.feature==null&&trees.feature_party==null ? trees.w : `${trees.feature_party}\n${trees.feature}`;  //根据需求赋的值
       trees.children = []
       trees.children.push(trees.left,trees.right)  //如果存在子节点，push进新建的children数组
       trees.children.forEach(e=>{
         e.label = e.feature==null&&e.feature_party==null ? e.w :  `${e.feature_party}\n${e.feature}` //根据需求
         if(e.left || e.right){
           this.xgbForEachFunc(e)  //如果依然存在子节点，回调
         }else{
           return  //如果没有孩子，跳出
         }
       })
     }
    },

2、渲染树

 xgbTreeFunc(id){  
      var trees =this.modelStructure[id]   //其中的一棵树
      this.xgbForEachFunc(trees)  //调用1中的渲染数据方法
      const data = {
          label:trees.label,  //显示在节点上的内容
          children:trees.children 
        };
       
       const container = document.getElementById(id);  //动态获取画布
       const width = Number((document.body.clientWidth-400-40)/2)
       const height = 400;
       
        const graph = new G6.TreeGraph({
          container: id,
          width,
          height,
          linkCenter: true,  //箭头指向中心
          fitView: true, //画布自适应
          animate: true,
          modes: {
              default: [
			                {
			                //   type: 'collapse-expand',
			                  // onChange: function onChange(item, collapsed) {
			                  //   const data = item.getModel();
			                  //   data.collapsed = collapsed;
			                  //   return true;
			                  // },
			                },  //点击节点
			                'drag-canvas',
			                // 'zoom-canvas', //放大缩小
			              ],
            },
          layout: {  //紧凑树
			              type: 'compactBox',
			              direction: 'TB',
			              getId: function getId(d) {
			                // return d.label;
			              },
			              getHeight: function getHeight() {
			                return 60;
			              },
			              getWidth: function getWidth() {
			                return 125;
			              },
			              getVGap: function getVGap() {
			                return 40;
			              },
			              getHGap: function getHGap() {
			                return 1;
			              },
			            },
          
          defaultNode: {   //点
			            type: "ellipse",
			            size: [115,40],
			            color: "#5B8FF9",
			            style: {
			              fill: "#9EC9FF",
			               radius: 5,
			              lineWidth: 1
			            },
			            labelCfg: {
			              style: {
			                fill: "#000000",
			                fontSize: 10
			              }
			            }
          },
          defaultEdge: {   //边
			            // type: 'flow-line',
			            type:"cubic-vertical",
			            style: {
			              stroke: "#e2e2e2",
			              endArrow: {
			              path: G6.Arrow.triangle(10, 10, 20), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
			              d: 20,//偏移，和path最后一位相同
			              fill: "#e2e2e2", //填充颜色
			              stroke: "grey", //描边颜色
			              opacity: 1
			            },
			          type: "cubic-vertical",
			          lineCap: "miter"

            }
          },
          
        });
        
        graph.node(function (node) {
            let position = 'center';
            let rotate = 0;
            if (!node.children) {
              node.type = "rect"   //如果是叶子结点，更改形状 
            }
            return {
              label: node.id,
              labelCfg: {
                position,
                offset: 5,
                style: {
                  rotate,
                  textAlign: 'center',
                },
              },
            };
          });
        graph.data(data);   //渲染树
        graph.render();
        graph.fitView();
        
        if (typeof window !== 'undefined')
      window.onresize = () => {
        if (!graph || graph.get('destroyed')) return;
        if (!container || !container.scrollWidth || !container.scrollHeight) return;
        graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
        

    },

五、调用
在加载时调用 渲染树 的方法

mounted(){
      setTimeout(() => {
        console.log('图',this.modelStructure)
        for(const key in this.modelStructure){
         this.xgbTreeFunc(this.modelStructure[key].id)   //循环传递每棵树的id，如果树里没有id，在获取数据时循环赋值进去
     }
      }, 500);
  },

六、容器

 <div v-for="(item,index) in modelStructure" :key="item.id" >  //modelStructure为后台传回的数据
            <div :id="item.id" ></div>  //动态加载
   </div>

七、效果