关于crm:如何基于G6进行双树流转绘制-京东云技术团队

1. 背景

• 业务背景：CRM 零碎随着各业务条线对线索精细化调配的诉求逐步减少，各个条线的流向规定会越来越简单，各个条线甚至整个 CRM 的线索流转规定急需一种树形的可视化的图来表白。
• 技术背景：在开发之前思考了三种计划，原生 canvas、fabric 以及 G6，三种计划各有优劣势

通过上述表格比照就可以看进去，对于构建更为简单的树、图等，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. 成绩展现

• 全局展现

[]()

• 部分展现

[]()

作者：京东物流 田雷雷

起源：京东云开发者社区