我前一段时间写过一篇文章《「AntV」怎样用SVG & X6制作客户旅程时光轴》，分享了怎样通过使用SVG和X6制作客户旅程时光轴，得到了很多伙伴们的喜欢。

一些小伙伴找我要到了演示Demo的源代码，可是即使在有演示Demo源代码，在这基础之上再进行二次开发时却遇到了很多障碍。

软件/工具是知识和经验凝结的产物，在开发上遇到的很多障碍、往往是相关知识、开发经验或者能力方面有欠缺，所以我打算在演示Demo源代码基础之上，通过接下来的《「AntV X6」从0到1实现客户旅程时光轴组件》一系列文章，将我使用SVG和X6的相关知识和经验对大家进行分享，希望能帮到有同样需求的朋友。

《「AntV X6」从0到1实现客户旅程时光轴组件》会以系列文章的形式，有步骤、有重点地分享我使用AntV X6进行客户旅程时光轴组件实现相关的知识和经验，目前该系列文章会有如下6篇：

系列文章将会以“项目驱动”的方式进行技术知识和开发经验的分享，贯穿整个系列文章的客户旅程时光轴Demo如下：

回顾上一篇文章，我们提到一个客户旅程时光轴图由以下5个核心要素组成——

5个核心要素.png

点（节点，Node）：旅程图中那些一个个的圆圈，被称为“节点”；
边（连线，Edge）：两个节点中的连线，被称为“边”；
标签（Label）：节点下的说明文字，被称为“标签”；
布局（Layout）：各个节点位置坐标的排列，被称为“布局”；
动画（Animation）：在旅程时光轴图中，有一个从第一个节点一直到最后一个节点的描边动画。

以下是《「AntV X6」从0到1实现客户旅程时光轴组件02-画布篇》文章正文。

画布

在Antv X6中承载这5个基本要素的容器，就是我们本篇文章要讲到“画布”。接下来我们通过创建一个Hello -> World应用，来掌握Antv X6中画布的使用：

使用画布

本篇文章使用的示例可以通过点击这个链接在码上掘金上进行查看。

在项目中使用X6进行图应用开发时，可以通过npm或yarn命令来安装X6相关依赖：

# npm
$ npm install @antv/x6 --save

# yarn
$ yarn add @antv/x6

因为有码上掘金的存在，我创建了一个在线Demo——接下来我们就以一个Hello -> World为例进行画布使用的讲解——我可以在通过import的方式获取@antv/x6的画布Graph：

import { Graph } from '@antv/x6@1.34.14';

接下来，我们分成以下4步来创建这个简单的Hello -> World图应用：

第1步准备数据

有别于我们平时开始时使用的“表格数据”——就像Excel表格一样，数据集是由一条条记录（行）组成，每一条记录由不同的属性（列）组成——我们使用Antv X6进行图应用开发时，需要使用由节点和边组成的数据，每一个节点都相当于原来的一条记录，而边则指明了两个节点之间的关系。

表格数据vs网状数据.png

比如在这个Hello -> World的这个例子里，我们需要准备的数据、结构如下：

// 1、准备数据
const data = {
    // 节点
    nodes: [
      {
        id: 'node1', // String，可选，节点的唯一标识
        x: 40,       // Number，必选，节点位置的 x 值
        y: 40,       // Number，必选，节点位置的 y 值
        width: 80,   // Number，可选，节点大小的 width 值
        height: 40,  // Number，可选，节点大小的 height 值
        label: 'Hello', // String，节点标签
      },
      {
        id: 'node2', // String，节点的唯一标识
        x: 200,      // Number，必选，节点位置的 x 值
        y: 40,      // Number，必选，节点位置的 y 值
        width: 80,   // Number，可选，节点大小的 width 值
        height: 40,  // Number，可选，节点大小的 height 值
        label: 'World', // String，节点标签
      },
    ],
    // 边
    edges: [
      {
        source: 'node1', // String，必须，起始节点 id
        target: 'node2', // String，必须，目标节点 id
      },
    ],
};

X6 支持 JSON 格式数据，该对象中需要有节点 nodes 和边 edges 字段，分别用数组表示。

第2步准备容器

接下来是创建一个用于容纳 X6 绘图的容器，可以是一个 div 标签。

// 2、 准备容器
<div id="container" ref={containerRef}></div>

第3步创建画布

然后，我们需要创建一个Graph对象——这个Graph对象在进行图编辑开发下非常重要，通过它可以实现对所有节点、边的增 删 改 查等各种操作——在创建Graph对象时，需要使用到第2步的绘图容器。

import { Graph } from '@antv/x6@1.34.14';

// 3、创建画布
const graph = new Graph({
  autoResize: true,
  container: containerRef.current
});

第4步渲染数据

最后，我们就可以使用刚刚创建的 graph 来渲染我们的节点和边：

// 4、渲染数据
graph.fromJSON(data);

就这样，我们就完成了一个最简单的 Hello --> World图应用的开发：

配置画布

接下来我们从画布样式和画布操作两个方面着手进行画布配置——

画布样式——包括网格和背景；
画布操作——包括平移和缩放。

画布样式

我们可以在Graph中配置网格形态与样式——例如下面配置了双线条网格，主网格尺寸为 10px * 10px，主网格线条颜色为 #E7E8EA，宽度为 1px，次网格线条颜色为 #CBCED3，宽度为 1px，次网格线条之间间隔4个主网格。

const graph = new Graph({
  // ... 其他属性配置
  grid: {
    size: 10,
    visible: true,
    type: 'doubleMesh',
    args: [
      {
        color: '#E7E8EA',
        thickness: 1,
      },
      {
        color: '#CBCED3',
        thickness: 1,
        factor: 4,
      },
    ],
  },
});

同样可以在Graph中全局配置画布的背景颜色和背景图片，如果需要配置，可以参考官网。

画布操作

画布的拖拽平移与滚轮缩放是高频操作，是画布需要具备的基本功能。

首先来看拖拽平移，基本用法：

const graph = new Graph({
  // ... 其他属性配置
  panning: {
    enabled: true,
  },
});

这样在按下鼠标左键，移动鼠标就可以拖拽画布，有些用户习惯用右键或者触摸板来进行画布的平移操作，X6 也是支持的,其中左键移动和右键移动有一个小小的区别：在图形上按下左键不会触发画布平移，但是右键可以。

const graph = new Graph({
  // ... 其他属性配置
  panning: {
    enabled: true,
    eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel'],
  },
});

在Graph上配置mousewheel可以实现画布缩放功能，基本用法：

const graph = new Graph({
  // ... 其他属性配置
  mousewheel: {
    enabled: true,
  },
});

简单地添加以上配置后，可以发现有三个问题：

缩放和平移冲突，滚动滚轮或者滑动触摸板的时候，画布既会缩放，同时也会平移；
画布总是按照画布中心点进行缩放，想要的是按照鼠标位置进行缩放；
没法控制缩放的最小和最大级别。

阅读官网文档后发现，可以用以下方式来解决：

设置修饰键 modifiers 为 ctrl，这样在触摸板上使用双指缩放或者按下 Ctrl 键再滚动鼠标才会触发画布缩放，就不会和拖拽平移冲突；
设置 zoomAtMousePosition 为 true，这样画布会以鼠标位置为中心点进行缩放；
设置 minScale 和 maxScale 可以控制画布可缩放的最小和最大级别。

最终的配置和效果如下：

const graph = new Graph({
  // ... 其他属性配置
  mousewheel: {
    enabled: true,
    zoomAtMousePosition: true,
    modifiers: 'ctrl',
    minScale: 0.5,
    maxScale: 3,
  },
});

通过以上步骤，我们初步掌握了AntV X6的画布的使用——在接下来的系列文章中，我们继续从“节点”、“连线”、“标签”、“布局”、“动画”这5个要素出发，通过结合下面的客户旅程时光轴图Demo案例，进行更详细的分解和讲述，希望能帮助到有需要的朋友：

「AntV X6」从0到1实现客户旅程时光轴组件02-画布篇

画布

使用画布

第1步 准备数据

第2步 准备容器

第3步 创建画布

第4步 渲染数据