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 插件来实现一个节点多个部分区域减少 tooltip
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. 成绩展现
- 全局展现
[]()
- 部分展现
[]()
作者:京东物流 田雷雷
起源:京东云开发者社区