如何使用 G6 在小程序里面画关系图

">
前言
G6基础
定个小目标
开始小目标
撒花🎉
精致的结尾
结尾后的一点问题

前言

小程序已经触达到了生活中的方方面面，随着业务需求的爆发增长，在小程序内绘制关系图的诉求也越来越多。然而业界还缺少支持小程序的图可视化引擎，很多小程序内依旧通过嵌套 webview 的方式进行展示，这在性能和体验上都存在很多问题。G6 团队实现了支持小程序的版本，同时针对移动端特性做了很多适配，让关系图在小程序中表现更好，操作更顺滑，助力小程序完成更多不可能的事情。同时，G6 的小程序版本做了大量适配工作，可以让 web 版以最小的成本迁移到小程序。

G6基础

阅读本文前，我们默认你有G6的使用经验，如果对G6没有任何概念，建议先移步什么是G6 。

定个小目标

本文会带你在10min内快速在小程序内绘制下面这个关系图，通过一个简单的实例带你进入小程序的图世界。

开始小目标

当然你首先得有一个小程序ide

引入npm包

⚠️ 目前版本为beta，请谨慎用于生产环境，3月底我们会对外发布release版本

 npm install --save @antv/g6-mobile@0.0.1-beta.1

创建canvas元素

编辑 pages/index/index.axml ，增加一个canvas元素。

<view>
    <canvas 
    id="canvas"
    style="
      height: {{canvasHeight - 110}}px;
      width: {{canvasWidth}}px;
    "
    disable-scroll="{{false}}"
    onTouchStart="ontouch"
    onTouchCancel="ontouch"
    onTouchMove="ontouch"
    onTouchEnd="ontouch"
  ></canvas>
</view>

G6-Mobile基于canvas实现，所以需要有一个canvas实例用来绘制关系图。由于小程序无法动态创建事件监听，所以需要通过 onTouchStart="ontouch" 的形式对事件进行捕获，并在js中透传给G6做处理。

准备数据

创建 pages/index/data.js 用于保存数据，下面这份数据主要描述了17个节点和连接关系，具体可以参考这里

export default {
  nodes: [
    { id: 'node0', size: 50 },
    { id: 'node1', size: 30 },
    { id: 'node2', size: 30 },
    { id: 'node3', size: 30 },
    { id: 'node4', size: 30, isLeaf: true },
    { id: 'node5', size: 30, isLeaf: true },
    { id: 'node6', size: 15, isLeaf: true },
    { id: 'node7', size: 15, isLeaf: true },
    { id: 'node8', size: 15, isLeaf: true },
    { id: 'node9', size: 15, isLeaf: true },
    { id: 'node10', size: 15, isLeaf: true },
    { id: 'node11', size: 15, isLeaf: true },
    { id: 'node12', size: 15, isLeaf: true },
    { id: 'node13', size: 15, isLeaf: true },
    { id: 'node14', size: 15, isLeaf: true },
    { id: 'node15', size: 15, isLeaf: true },
    { id: 'node16', size: 15, isLeaf: true },
  ],
  edges: [
    { source: 'node0', target: 'node1' },
    { source: 'node0', target: 'node2' },
    { source: 'node0', target: 'node3' },
    { source: 'node0', target: 'node4' },
    { source: 'node0', target: 'node5' },
    { source: 'node1', target: 'node6' },
    { source: 'node1', target: 'node7' },
    { source: 'node2', target: 'node8' },
    { source: 'node2', target: 'node9' },
    { source: 'node2', target: 'node10' },
    { source: 'node2', target: 'node11' },
    { source: 'node2', target: 'node12' },
    { source: 'node2', target: 'node13' },
    { source: 'node3', target: 'node14' },
    { source: 'node3', target: 'node15' },
    { source: 'node3', target: 'node16' },
  ],
};

创建关系图

完成了上面两步操作，接下来我们就要开始绘图了。
把 pages/index/index.js 中逻辑修改为

import G6 from '@antv/g6-mobile';
import graphData from './data';
Page({
  data: {
    canvasWidth: 0,
    canvasHeight: 0,
    pixelRatio: 1,
  },
  onLoad() {
    const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
    this.setData({
      canvasWidth: windowWidth,
      canvasHeight: windowHeight,
      pixelRatio,
    });
    this.ctx = my.createCanvasContext('canvas');
    this.draw();
  },
  ontouch(e) {
    this.graph.emitEvent(e);
  },
  draw() {
    const { canvasWidth, canvasHeight } = this.data;
    this.graph = new G6.Graph({
      container: null,    // 可以不写这一行，在小程序中无需传递container
      context: this.ctx, // 由于小程序无法创建dom结构，所以在小程序中需要传递canvas的context
      renderer: 'mini', // 配置渲染使用小程序模式，后续文档中我们会逐步完善
      width: canvasWidth,
      height: canvasHeight,
      fitView: false,
      modes: {
        default: ['zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
      },
      defaultNode: {
        color: '#5B8FF9',
      },
    });
    const nodes = graphData.nodes;
    this.graph.data({
      nodes,
      edges: graphData.edges.map(function (edge, i) {
        edge.id = 'edge' + i;
        return Object.assign({}, edge);
      }),
    });
    this.graph.render();
  },
});

⚠️注意事项

在小程序中无需传递container
由于小程序无法创建dom结构，所以在小程序中需要传递canvas的context
renderer: ‘mini’ 配置渲染使用小程序模式，后续文档中我们会逐步完善🧎‍♂️
撒花🎉

精致的结尾
G6-Mobile已经发布beta版本，月底完成release的发布，大家在使用过程中有任何疑问24h在线答疑。

结尾后的一点问题

模拟器受限于canvas实现方式，性能较差，原因主要在于worker和render通信成本过高。建议大家在客户端使用测试，支付宝小程序注意一定要开启native-canvas。另外由于beta版可能会有部分功能调整，需谨慎使用在生产环境。

我们也会在这一个月继续优化完善小程序版本，感谢大家的关注。

前言