1. 背景
- 业务背景：CRM零碎随着各业务条线对线索精细化调配的诉求逐步减少，各个条线的流向规定会越来越简单，各个条线甚至整个CRM的线索流转规定急需一种树形的可视化的图来表白。
- 技术背景：在开发之前思考了三种计划，原生canvas、fabric以及G6，三种计划各有优劣势
| 原生canvas | fabric | G6 | |
|---|---|---|---|
| 长处 | 灵便、自在、可定制化十分强 | 封装了canvas的api，应用简略灵便 | 提供了简单树、图等api，只须要依照文档配置即可 |
| 毛病 | 开发简单、耗时 | 对于构建大型树、图等简单、耗时 | 在开发前须要认真浏览api文档，上手慢 |
通过上述表格比照就可以看进去，对于构建更为简单的树、图等，G6具备显著的劣势，而且又有沉闷的开源社区，为后续的保护降级提供了保障。
2. 基础知识
[]()
上面是对于本次双树流转绘制的几个外围概念，简略介绍一下，如有趣味，还是倡议浏览G6官网API文档
- 图Graph
通过 new G6.Graph(config) 进行图的实例化。其中参数 config是 Object 类型的图的配置项，图的大部分性能能够通过该配置项进行全局配置。
如果是树图，须要应用new G6.TreeGraph办法进行实例化
const graph = new G6.Graph({ container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应 // 画布宽高 width: 800, height: 500,});// 读取数据graph.data(data);// 渲染图graph.render();- 图元素-节点
G6 的内置节点包含 circle，rect，ellipse，diamond，triangle，star，image，modelRect，donut（v4.2.5 起反对）。这些内置节点的默认款式别离如下图所示。
[]()
内置节点配置
const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, defaultNode: { type: 'circle', // 节点类型 // ... 其余配置 },});自定义节点配置
// 在节点配置中配置自定义节点名称以及尺寸defaultNode: { type: 'card-node', size: [338, 70],}// 应用G6.registerNode自定义节点，在自定义节点中能够自定义各种形态的图形，包含text等G6.registerNode('card-node', { draw: function drawShape(cfg, group) { const w = cfg.size[0]; const h = cfg.size[1]; group.addShape('rect', { attrs: { x: -w / 2 - 2, y: -(h - 30) / 2, width: 6, //200, height: h - 30, // 60 fill: '#3c6ef0', radius: [0, 4, 4, 0] }, name: 'mark-box', draggable: true, });- 图元素-边
G6 提供了 9 种内置边：
line：直线，不反对控制点；
polyline：折线，反对多个控制点；
arc：圆弧线；
quadratic：二阶贝塞尔曲线；
cubic：三阶贝塞尔曲线；
cubic-vertical：垂直方向的三阶贝塞尔曲线，不思考用户从内部传入的控制点；
cubic-horizontal：程度方向的三阶贝塞尔曲线，不思考用户从内部传入的控制点；
loop：自环。
[]()
内置边配置
const graph = new G6.Graph({ container: 'mountNode', width: 800, height: 600, defaultEdge: { type: 'cubic', // 其余配置 },});自定义边配置
在配置中援用自定义边defaultEdge: { type: 'hvh', // 其余配置 }// 应用G6.registerEdge办法配置自定义边G6.registerEdge('hvh', { draw(cfg, group) { const startPoint = cfg.startPoint; const endPoint = cfg.endPoint; const shape = group.addShape('path', { attrs: { stroke: '#333', path: [ ['M', startPoint.x, startPoint.y], ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, startPoint.y], // 三分之一处 ['L', endPoint.x / 3 + (2 / 3) * startPoint.x, endPoint.y], // 三分之二处 ['L', endPoint.x, endPoint.y], ], }, // 在 G6 3.3 及之后的版本中，必须指定 name，能够是任意字符串，但须要在同一个自定义元素类型中放弃唯一性 name: 'path-shape', }); return shape; },});- 图布局-树图布局
树图TreeGraph布局办法总览
CompactBox Layout：紧凑树布局；
Dendrogram Layout：树状布局（叶子节点布局对齐到同一层）；
Indented Layout：缩进布局；
Mindmap Layout：脑图布局
const graph = new G6.TreeGraph({ container: 'mountNode', modes: { default: [ { // 定义开展/膨胀行为 type: 'collapse-expand', }, 'drag-canvas', ], }, // 定义布局 layout: { type: 'dendrogram', // 布局类型 direction: 'LR', // 自左至右布局，可选的有 H / V / LR / RL / TB / BT nodeSep: 50, // 节点之间间距 rankSep: 100, // 每个层级之间的间距 excludeInvisibles: true, // 布局计算是否排除掉暗藏的节点，v4.8.8 起反对 },});- 交互与事件
全局事件
只有在画布上范畴内产生均会被触发，如mousedown，mouseup，click，mouseenter，mouseleave等。
graph.on('click', (ev) => { const shape = ev.target; const item = ev.item; if (item) { const type = item.getType(); }});canvas 事件
只在 canvas 空白处被触发，如canvas:mousedown，canvas:click等，以canvas:eventName为事件名称。
graph.on('canvas:click', (ev) => { const shape = ev.target; const item = ev.item; if (item) { const type = item.getType(); }});节点/边 上的事件
例如node:mousedown，edge:click,combo:click等，以type:eventName为事件名称。
graph.on('node:click', (ev) => { const node = ev.item; // 被点击的节点元素 const shape = ev.target; // 被点击的图形，可依据该信息作出不同响应，以达到部分响应成果 // ... do sth});graph.on('edge:click', (ev) => { const edge = ev.item; // 被点击的边元素 const shape = ev.target; // 被点击的图形，可依据该信息作出不同响应，以达到部分响应成果 // ... do sth});graph.on('combo:click', (ev) => { const combo = ev.item; // 被点击 combo 元素 const shape = ev.target; // 被点击的图形，可依据该信息作出不同响应，以达到部分响应成果 // ... do sth});3. 技术计划&施行
- 数据筹备
要求数据中每一个节点必须有id，且id为字符串类型。module字段root示意根节点，right示意子节点，left示意父节点。flowCountList示意边，从某个节点到某个节点
data: { id: '1', name: '根节点', flowInCount: 9999, flowOutCount: 9999, currentCount: 9999, module: 'root', children: [ { id: '2', name: '右一节点', flowInCount: 9999, flowOutCount: 9999, currentCount: 9999, module: 'son', }, { id: '3', name: '左一节点', flowInCount: 9999, flowOutCount: 9999, currentCount: 9999, module: 'father', } ]}flowCountList: [ { fromPoolId: '1', toPoolId: '2', clueCount: 111 }, { fromPoolId: '1', toPoolId: '3', clueCount: 222 }]- 初始化Minimap实例
如果须要加Minimap能够在画布外层div中减少一个div#minimap，将小地图放入其中。上面配置中delegate示意小地图只渲染画布中元素的框架，以此来升高性能损耗。
const miniMap = document.getElementById('minimap');const minimap = new G6.Minimap({ container: miniMap, type: 'delegate', size: [178, 138] });- 初始化树图
modes中配置的drag-canvas示意反对画布拖拽，zoom-canvas示意反对画布放大放大，tooltip示意给节点减少tooltip提醒。
layout中getSide办法会依据数据类型判断以后节点属于父节点还是子节点，本办法只针对根节点无效。
this.graph = new G6.TreeGraph({ container: 'clueCanvas', width：1000, // width和height能够依据本人画布大小进行赋值 height：500, modes: { default: ['drag-canvas', 'zoom-canvas',{ type: 'tooltip', formatText: function formatText(model) { return model.name; }, shouldBegin: (e) => { const target = e.target; if (target.get('name') === 'title') return true; return false; }, }], }, defaultNode: { type: 'card-node', size: [338, 70], }, defaultEdge: { type: 'custom-edge', style: { lineWidth: 4, lineAppendWidth: 8, stroke: '#BABEC7', } }, layout: { type: 'mindmap', direction: 'H', getHeight: () => {return 70;}, //节点高度 getWidth: () => {return 338;}, // 节点宽度 getVGap: () => {return 8;}, // 节点之间的垂直间距 getHGap: () => {return 100;}, // 节点之间的程度间距 getSide: (d) => { if (d.data.module === 'father') { return 'left'; } return 'right'; }, }, plugins: [minimap] }); this.graph.data(data); this.graph.render(); // 渲染 this.graph.fitView(); // 全屏展现- 自定义节点
自定义节点是在默认节点不能满足咱们的需要时，本人定义一些图形因素，能够单个的也能够是多个进行组合，如下图所示：
[]()
因为篇幅无限，以下代码只展现了外边框和眼睛图标的绘制，其余元素的绘制根本相似。其中setState回调办法是监听状态变动的，比方本例中监听树节点开展/收起，进行眼睛图标的切换以及节点底色的变更逻辑。
G6.registerNode('card-node', { draw: function drawShape(cfg, group) { const w = cfg.size[0]; const h = cfg.size[1]; const shape = group.addShape('rect', { attrs: { x: -w / 2, y: -h / 2, width: w, //200, height: h, // 60 radius: 8, fill: 'l(0) 0:rgba(197,213,255,1) 0.3:rgba(226,233,253,1) 1:rgba(255,255,255,1)', shadowOffsetX: -2, shadowOffsetY: 0, shadowColor: '#82A2F5', shadowBlur: 0, stroke: 'l(0) 0.1:rgba(138,169,249,1) 1:rgba(202,216,254,1)' }, // 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 name: 'main-box', draggable: true, }); cfg.children && group.addShape('image', { attrs: { x: w / 2 - 35, y: -h / 2 + 10, cursor: 'pointer', img: flowEyeOpen,//cfg.collapsed ? flowEyeOpen : flowEyeClose, width: 16, height: 16 }, name: 'collapse-icon', }); return shape; }, setState(name, value, item) { if (name === 'collapsed') { // 替换眼睛图标 const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon'); const icon = value ? flowEyeClose : flowEyeOpen; marker.attr('img', icon); // 替换卡片背景 const mainBox = item.get('group').find((ele) => ele.get('name') === 'main-box'); 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)' const shadowOffsetX = value ? 0 : -2 mainBox.attr('fill', fill) mainBox.attr('shadowOffsetX', shadowOffsetX) } }, });- 节点事件监听
当点击节点中的眼睛图标则执行开展/收起，并更新其状态，进行重绘。状态更新之后，上文中的setState回调函数就被登程，随后依据新的开展/收起状态对节点款式进行变更
this.graph.on('node:click', (e) => { // 点击眼睛图标开展子节点 if (e.target.get('name') === 'collapse-icon') { e.item.getModel().collapsed = !e.item.getModel().collapsed; this.graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed); this.graph.layout(); } });- 自定义边
边的默认款式应用内置边cubic-horizontal类型，当鼠标移到边上时会呈现一个数量数据如下图所示：
[]()
当状态变为激活状态active时，将边上的元素透明度置为1可见，否则置为0不可见。默认为0
G6.registerEdge( 'custom-edge', { afterDraw(cfg, group) { const source = cfg.sourceNode._cfg.model.id const target = cfg.targetNode._cfg.model.id let current = self.flowCountList.find(item=>{ return source === item.fromPoolId && target === item.toPoolId }) // 如果未找到，在进行反向查一次 if(!current) { current = self.flowCountList.find(item=>{ return source === item.toPoolId && target === item.fromPoolId }) } // 获取图形组中的第一个图形，在这里就是边的门路图形 const shape = group.get('children')[0]; // 获取门路图形的中点坐标 const midPoint = shape.getPoint(0.5); // 在中点减少一个矩形，留神矩形的原点在其左上角 group.addShape('rect', { attrs: { width: 92, height: 20, fill: '#BABEC7', stroke: '#868D9F', lineWidth: 1, radius: 10, opacity: 0, // x 和 y 别离减去 width / 2 与 height / 2，使矩形核心在 midPoint 上 x: midPoint.x - 92/2, y: midPoint.y - 20/2, }, name: 'edge-count', // 在 G6 3.3 及之后的版本中，必须指定 name，能够是任意字符串，但须要在同一个自定义元素类型中放弃唯一性 }); group.addShape('text', { attrs: { textBaseline: 'top', x: midPoint.x - 92/2 + 20, y: midPoint.y - 12/2 + 1, lineHeight: 12, text: `流出 ${current ? current.clueCount : 0}`, fontSize: 12, fill: '#ffffff', opacity: 0, }, name: 'edge-text', }); }, // // 响应状态变动 setState(name, value, item) { if (name === 'active') { const edgeCount = item.get('group').find((ele) => ele.get('name') === 'edge-count'); const edgeText = item.get('group').find((ele) => ele.get('name') === 'edge-text'); edgeCount.attr('opacity', value ? 1 : 0) edgeText.attr('opacity', value ? 1 : 0) } }, }, 'cubic-horizontal', );- 边事件监听
监听边的mouseenter和mouseleave事件，更新其激活状态
this.graph.on('edge:mouseenter', (ev) => { const edge = ev.item; this.graph.setItemState(edge, 'active', true); }); this.graph.on('edge:mouseleave', (ev) => { const edge = ev.item; this.graph.setItemState(edge, 'active', false); });到此单数渲染逻辑介绍结束，如果有相似案例，欢送参考
4. 踩坑记录
- 缩进树-顶部对齐，左侧树不会对齐
配置如下indented示意缩进树，dropCap置为false示意敞开下垂树，只有右侧树时，显示失常，如果双树渲染，左侧树不会缩进，属于g6自身的bug
layout: { type: 'indented', dropCap: false, },[]()
- 首次加载树结构，限度只开展两级只须要在二级节点减少属性collapsed : true 数据结构如下:
{ id: '1', children: [{ id: '1-1', children: [{ id: '1-1-1', collapsed: true }] }]}[]()
- 一个节点有两个部分区域减少tooltip
const tooltip = new G6.Tooltip({ className: 'g6-tooltip', offsetX: -5, offsetY: -165, getContent(e) { return '111' }, shouldBegin(e){ return true }, itemTypes: ['node']});// 减少tooltip插件来实现一个节点多个部分区域减少tooltipplugins: [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. 成绩展现
- 全局展现
[]()
- 部分展现
[]()
作者：京东物流 田雷雷
起源：京东云开发者社区