如何基于G6进行双树流转绘制？

云峰郁起

1. 背景

• 业务背景：CRM系统随着各业务条线对线索精细化分配的诉求逐渐增加，各个条线的流向规则会越来越复杂，各个条线甚至整个CRM的线索流转规则急需一种树形的可视化的图来表达。
  
• 技术背景：在开发之前考虑了三种方案，原生canvas、fabric以及G6，三种方案各有优劣势
  

原生canvasfabricG6优点灵活、自由、可定制化非常强封装了canvas的api，使用简单灵活提供了复杂树、图等api，只需要按照文档配置即可缺点开发复杂、耗时对于构建大型树、图等复杂、耗时在开发前需要认真阅读api文档，上手慢通过上述表格对比就可以看出来，对于构建更为复杂的树、图等，G6具备明显的优势，而且又有活跃的开源社区，为后续的维护升级提供了保证。
2. 基础知识

下面是关于本次双树流转绘制的几个核心概念，简单介绍一下，如有兴趣，还是建议阅读G6官方API文档

• 图Graph
  

通过 new G6.Graph(config) 进行图的实例化。其中参数 config是 Object 类型的图的配置项，图的大部分功能可以通过该配置项进行全局配置。
如果是树图，需要使用new G6.TreeGraph方法进行实例化

1. const graph = new G6.Graph({
2.   container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
3.   // 画布宽高
4.   width: 800,
5.   height: 500,
6. });
7. // 读取数据
8. graph.data(data);
9. // 渲染图
10. graph.render();

复制代码

• 图元素-节点
  

G6 的内置节点包括 circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut（v4.2.5 起支持）。这些内置节点的默认样式分别如下图所示。

内置节点配置

1. const graph = new G6.Graph({
2.   container: 'mountNode',
3.   width: 800,
4.   height: 600,
5.   defaultNode: {
6.     type: 'circle', // 节点类型
7.     // ... 其他配置
8.   },
9. });

复制代码

自定义节点配置

1. // 在节点配置中配置自定义节点名称以及尺寸
2. defaultNode: {
3.        type: 'card-node',
4.        size: [338, 70],
5. }
6. // 使用G6.registerNode自定义节点，在自定义节点中可以自定义各种形状的图形，包括text等
7. G6.registerNode('card-node', {
8.         draw: function drawShape(cfg, group) {
9.           const w = cfg.size[0];
10.           const h = cfg.size[1];
11.           group.addShape('rect', {
12.             attrs: {
13.               x: -w / 2 - 2,
14.               y: -(h - 30) / 2,
15.               width: 6, //200,
16.               height: h - 30, // 60
17.               fill: '#3c6ef0',
18.               radius: [0, 4, 4, 0]
19.             },
20.             name: 'mark-box',
21.             draggable: true,
22.           });

复制代码

• 图元素-边
  

G6 提供了 9 种内置边：
line：直线，不支持控制点；
polyline：折线，支持多个控制点；
arc：圆弧线；
quadratic：二阶贝塞尔曲线；
cubic：三阶贝塞尔曲线；
cubic-vertical：垂直方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
cubic-horizontal：水平方向的三阶贝塞尔曲线，不考虑用户从外部传入的控制点；
loop：自环。

内置边配置

1. const graph = new G6.Graph({
2.   container: 'mountNode',
3.   width: 800,
4.   height: 600,
5.   defaultEdge: {
6.     type: 'cubic',
7.     // 其他配置
8.   },
9. });

复制代码

自定义边配置

1. 在配置中引用自定义边
2. defaultEdge: {
3.     type: 'hvh',
4.     // 其他配置
5.   }
6. // 使用G6.registerEdge方法配置自定义边
7. G6.registerEdge('hvh', {
8.   draw(cfg, group) {
9.     const startPoint = cfg.startPoint;
10.     const endPoint = cfg.endPoint;
11.     const shape = group.addShape('path', {
12.       attrs: {
13.         stroke: '#333',
14.         path: [
15.           ['M', startPoint.x, startPoint.y],
16.           ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], // 三分之一处
17.           ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], // 三分之二处
18.           ['L', endPoint.x, endPoint.y],
19.         ],
20.       },
21.       // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
22.       name: 'path-shape',
23.     });
24.     return shape;
25.   },
26. });

复制代码

• 图布局-树图布局
  

树图TreeGraph布局方法总览
CompactBox Layout：紧凑树布局；
Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；
Indented Layout：缩进布局；
Mindmap Layout：脑图布局

1. const graph = new G6.TreeGraph({
2.   container: 'mountNode',
3.   modes: {
4.     default: [
5.       {
6.         // 定义展开/收缩行为
7.         type: 'collapse-expand',
8.       },
9.       'drag-canvas',
10.     ],
11.   },
12.   // 定义布局
13.   layout: {
14.     type: 'dendrogram', // 布局类型
15.     direction: 'LR', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT
16.     nodeSep: 50, // 节点之间间距
17.     rankSep: 100, // 每个层级之间的间距
18.     excludeInvisibles: true, // 布局计算是否排除掉隐藏的节点，v4.8.8 起支持
19.   },
20. });

复制代码

• 交互与事件
  

全局事件
只要在画布上范围内发生均会被触发，如mousedown，mouseup，click，mouseenter，mouseleave等。

1. graph.on('click', (ev) => {
2.   const shape = ev.target;
3.   const item = ev.item;
4.   if (item) {
5.     const type = item.getType();
6.   }
7. });

复制代码

canvas 事件
只在 canvas 空白处被触发，如canvas:mousedown，canvas:click等，以canvas:eventName为事件名称。

1. graph.on('canvas:click', (ev) => {
2.   const shape = ev.target;
3.   const item = ev.item;
4.   if (item) {
5.     const type = item.getType();
6.   }
7. });

复制代码

节点/边 上的事件
例如node:mousedown，edge:click,combo:click等，以type:eventName为事件名称。

1. graph.on('node:click', (ev) => {
2.   const node = ev.item; // 被点击的节点元素
3.   const shape = ev.target; // 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果
4.   // ... do sth
5. });
7. graph.on('edge:click', (ev) => {
8.   const edge = ev.item; // 被点击的边元素
9.   const shape = ev.target; // 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果
10.   // ... do sth
11. });
13. graph.on('combo:click', (ev) => {
14.   const combo = ev.item; // 被点击 combo 元素
15.   const shape = ev.target; // 被点击的图形，可根据该信息作出不同响应，以达到局部响应效果
16.   // ... do sth
17. });

复制代码

3. 技术方案&实施

• 数据准备
  

要求数据中每一个节点必须有id，且id为字符串类型。module字段root表示根节点，right表示子节点，left表示父节点。flowCountList表示边，从某个节点到某个节点

1. data: {
2.   id: '1',
3.   name: '根节点',
4.   flowInCount: 9999,
5.   flowOutCount: 9999,
6.   currentCount: 9999,
7.   module: 'root',
8.   children: [
9.     {
10.       id: '2',
11.       name: '右一节点',
12.       flowInCount: 9999,
13.       flowOutCount: 9999,
14.       currentCount: 9999,
15.       module: 'son',
16.     },
17.     {
18.       id: '3',
19.       name: '左一节点',
20.       flowInCount: 9999,
21.       flowOutCount: 9999,
22.       currentCount: 9999,
23.       module: 'father',
24.     }
25.   ]
26. }
27. flowCountList: [
28.     {
29.         fromPoolId: '1',
30.         toPoolId: '2',
31.         clueCount: 111
32.     },
33.     {
34.         fromPoolId: '1',
35.         toPoolId: '3',
36.         clueCount: 222
37.     }
38. ]

复制代码

• 初始化Minimap实例
  

如果需要加Minimap可以在画布外层div中增加一个div#minimap，将小地图放入其中。下面配置中delegate表示小地图只渲染画布中元素的框架，以此来降低性能损耗。

1. const miniMap = document.getElementById('minimap');
2. const minimap = new G6.Minimap({
3.     container: miniMap,
4.     type: 'delegate',
5.     size: [178, 138]
6.   });

复制代码

• 初始化树图
  

modes中配置的drag-canvas表示支持画布拖拽，zoom-canvas表示支持画布放大缩小，tooltip表示给节点增加tooltip提示。
layout中getSide方法会根据数据类型判断当前节点属于父节点还是子节点，本方法只针对根节点有效。

1. this.graph = new G6.TreeGraph({
2.     container: 'clueCanvas',
3.     width：1000, // width和height可以根据自己画布大小进行赋值
4.     height：500,
5.     modes: {
6.       default: ['drag-canvas', 'zoom-canvas',{
7.         type: 'tooltip',
8.         formatText: function formatText(model) {
9.           return model.name;
10.         },
11.         shouldBegin: (e) => {
12.           const target = e.target;
13.           if (target.get('name') === 'title') return true;
14.           return false;
15.         },
16.       }],
17.     },
18.     defaultNode: {
19.       type: 'card-node',
20.       size: [338, 70],
21.     },
22.     defaultEdge: {
23.       type: 'custom-edge',
24.       style: {
25.         lineWidth: 4,
26.         lineAppendWidth: 8,
27.         stroke: '#BABEC7',
28.       }
29.     },
30.     layout: {
31.       type: 'mindmap',
32.       direction: 'H',
33.       getHeight: () => {return 70;}, //节点高度
34.       getWidth: () => {return 338;}, // 节点宽度
35.       getVGap: () => {return 8;}, // 节点之间的垂直间距
36.       getHGap: () => {return 100;}, // 节点之间的水平间距
37.       getSide: (d) => {
38.         if (d.data.module === 'father') {
39.           return 'left';
40.         }
41.         return 'right';
42.       },
43.     },
44.     plugins: [minimap]
45.   });
46.   this.graph.data(data);
47.   this.graph.render(); // 渲染
48.   this.graph.fitView(); // 全屏展示

复制代码

• 自定义节点
  

自定义节点是在默认节点不能满足我们的需求时，自己定义一些图形要素，可以单个的也可以是多个进行组合，如下图所示：

由于篇幅有限，以下代码只展示了外边框和眼睛图标的绘制，其他元素的绘制基本类似。其中setState回调方法是监听状态变化的，比如本例中监听树节点展开/收起，进行眼睛图标的切换以及节点底色的变更逻辑。

1. G6.registerNode('card-node', {
2.         draw: function drawShape(cfg, group) {
3.           const w = cfg.size[0];
4.           const h = cfg.size[1];
5.           const shape = group.addShape('rect', {
6.             attrs: {
7.               x: -w / 2,
8.               y: -h / 2,
9.               width: w, //200,
10.               height: h, // 60
11.               radius: 8,
12.               fill: 'l(0) 0:rgba(197,213,255,1) 0.3:rgba(226,233,253,1) 1:rgba(255,255,255,1)',
13.               shadowOffsetX: -2,
14.               shadowOffsetY: 0,
15.               shadowColor: '#82A2F5',
16.               shadowBlur: 0,
17.               stroke: 'l(0) 0.1:rgba(138,169,249,1) 1:rgba(202,216,254,1)'
18.             },
19.             // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
20.             name: 'main-box',
21.             draggable: true,
22.           });
23.           cfg.children &&
24.             group.addShape('image', {
25.               attrs: {
26.                 x: w / 2 - 35,
27.                 y: -h / 2 + 10,
28.                 cursor: 'pointer',
29.                 img: flowEyeOpen,//cfg.collapsed ? flowEyeOpen : flowEyeClose,
30.                 width: 16,
31.                 height: 16
32.               },
33.               name: 'collapse-icon',
34.             });
35.           return shape;
36.         },
37.         setState(name, value, item) {
38.           if (name === 'collapsed') {
39.             // 替换眼睛图标
40.             const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
41.             const icon = value ? flowEyeClose : flowEyeOpen;
42.             marker.attr('img', icon);
43.             // 替换卡片背景
44.             const mainBox = item.get('group').find((ele) => ele.get('name') === 'main-box');
45.             const fill = value ? '#fff' : 'l(0) 0:rgba(197,213,255,1) 0.3:rgba(226,233,253,1) 1:rgba(255,255,255,1)'
46.             const shadowOffsetX = value ? 0 : -2
47.             mainBox.attr('fill', fill)
48.             mainBox.attr('shadowOffsetX', shadowOffsetX)
50.           }
51.         },
52.       });

复制代码

• 节点事件监听
  

当点击节点中的眼睛图标则执行展开/收起，并更新其状态，进行重绘。状态更新之后，上文中的setState回调函数就被出发，随后根据新的展开/收起状态对节点样式进行变更

1. this.graph.on('node:click', (e) => {
2.     // 点击眼睛图标展开子节点
3.     if (e.target.get('name') === 'collapse-icon') {
4.       e.item.getModel().collapsed = !e.item.getModel().collapsed;
5.       this.graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);
6.       this.graph.layout();
7.     }
8.   });

复制代码

• 自定义边
  

边的默认样式使用内置边cubic-horizontal类型，当鼠标移到边上时会出现一个数量数据如下图所示：

当状态变为激活状态active时，将边上的元素透明度置为1可见，否则置为0不可见。默认为0

1. G6.registerEdge(
2.         'custom-edge',
3.         {
4.           afterDraw(cfg, group) {
5.             const source = cfg.sourceNode._cfg.model.id
6.             const target = cfg.targetNode._cfg.model.id
7.             let current = self.flowCountList.find(item=>{
8.               return source === item.fromPoolId && target === item.toPoolId
9.             })
10.             // 如果未找到，在进行反向查一次
11.             if(!current) {
12.               current = self.flowCountList.find(item=>{
13.                 return source === item.toPoolId && target === item.fromPoolId
14.               })
15.             }
16.             // 获取图形组中的第一个图形，在这里就是边的路径图形
17.             const shape = group.get('children')[0];
18.             // 获取路径图形的中点坐标
19.             const midPoint = shape.getPoint(0.5);
20.             // 在中点增加一个矩形，注意矩形的原点在其左上角
21.             group.addShape('rect', {
22.               attrs: {
23.                 width: 92,
24.                 height: 20,
25.                 fill: '#BABEC7',
26.                 stroke: '#868D9F',
27.                 lineWidth: 1,
28.                 radius: 10,
29.                 opacity: 0,
30.                 // x 和 y 分别减去 width / 2 与 height / 2，使矩形中心在 midPoint 上
31.                 x: midPoint.x - 92/2,
32.                 y: midPoint.y - 20/2,
33.               },
34.               name: 'edge-count', // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
35.             });
36.             group.addShape('text', {
37.               attrs: {
38.                 textBaseline: 'top',
39.                 x: midPoint.x - 92/2 + 20,
40.                 y: midPoint.y - 12/2 + 1,
41.                 lineHeight: 12,
42.                 text: `流出 ${current ? current.clueCount : 0}`,
43.                 fontSize: 12,
44.                 fill: '#ffffff',
45.                 opacity: 0,
46.               },
47.               name: 'edge-text',
48.             });
49.           },
50.           // // 响应状态变化
51.           setState(name, value, item) {
52.             if (name === 'active') {
53.               const edgeCount = item.get('group').find((ele) => ele.get('name') === 'edge-count');
54.               const edgeText = item.get('group').find((ele) => ele.get('name') === 'edge-text');
55.               edgeCount.attr('opacity', value ? 1 : 0)
56.               edgeText.attr('opacity', value ? 1 : 0)
57.             }
58.           },
59.         },
60.         'cubic-horizontal',
61.       );

复制代码

• 边事件监听
  

监听边的mouseenter和mouseleave事件，更新其激活状态

1. this.graph.on('edge:mouseenter', (ev) => {
2.     const edge = ev.item;
3.     this.graph.setItemState(edge, 'active', true);
4.   });
6.   this.graph.on('edge:mouseleave', (ev) => {
7.     const edge = ev.item;
8.     this.graph.setItemState(edge, 'active', false);
9.   });

复制代码

到此双数渲染逻辑介绍完毕，如果有类似案例，欢迎参考
4. 踩坑记录

• 缩进树-顶部对齐，左侧树不会对齐
  

配置如下indented表示缩进树，dropCap置为false表示关闭下垂树，只有右侧树时，显示正常，如果双树渲染，左侧树不会缩进，属于g6本身的bug

1. layout: {
2.     type: 'indented',
3.     dropCap: false,
4.   },

复制代码

• 初次加载树结构，限制只展开两级只需要在二级节点增加属性collapsed : true 数据结构如下:
  

1. {
2.     id: '1',
3.     children: [{
4.         id: '1-1',
5.         children: [{
6.             id: '1-1-1',
7.             collapsed: true
8.         }]
9.     }]
10. }

复制代码

• 一个节点有两个局部区域增加tooltip
  

1. const tooltip = new G6.Tooltip({
2.     className: 'g6-tooltip',
3.     offsetX: -5,
4.     offsetY: -165,
5.     getContent(e) {
6.       return '111'
7.     },
8.     shouldBegin(e){
9.       return true
10.     },
11.     itemTypes: ['node']
12. });
13. // 增加tooltip插件来实现一个节点多个局部区域增加tooltip
14. plugins: [tooltip,tooltip1]

复制代码

• 关于编译报错的问题
  

由于我本地ts版本太低，导致ts在对g6进行代码检查时报错，具体报错信息如下截图：

原因分析：
g6代码库用到了ts的高级语法，导致当前低版本ts在对其进行检查时未通过
解决方法：
（1）.在tsconfig.json中增加"skipLibCheck": true跳过ts的检查，但是发现测试环境和预发环境编译通过，上线时使用npm run build编译不成功

（2）.升级ts版本，将当前使用的3.5.3升级至最新版，发现虽然上述问题解决了，但是系统中其他地方有报错，为了降低上线的风险，放弃了这种方式
（3）.降级@antv/g6的版本，使其从最新版本降到了4.3.4，最后发现可行，编译没有任何问题，而且功能运行正常，体验较差的是@antv/g6关于每一个版本的升级都没有提及这个问题，所以需要按版本试验，整整折腾了一天才找到这个版本，后续如果有人遇到这个问题可以进行借鉴

5. 成果展示

• 全局展示
  

• 局部展示
  

作者：京东物流 田雷雷
来源：京东云开发者社区

来源:https://www.cnblogs.com/jingdongkeji/p/17448095.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！