react+antvX6 制作可编辑图表

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

最近有一个项目是电路的模拟实验平台，需求为需要有一个工作画布，和一个组件库，实现组件器械的可拖拽、可连接，实验状态可以控制，数据流向展示等功能。就像我们平时课上的虚拟仿真平台一样，又需要像流程图软件一样，可以托拽各种组件到画布中。最后我选择使用antv的X6来制作。X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG 图、ER 图等图应用。

1. 安装

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

# yarn
$ yarn add @antv/x6

2.安装完成之后，使用 import 或 require 进行引用。我使用的就是这种方法。

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

也可以通过 script 标签引入，默认返回最新版

<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>

同时，对于生产环境，官方推荐使用一个明确的版本号，以避免新版本造成的不可预期的破坏：

<script src="https://unpkg.com/@antv/x6@1.1.1/dist/x6.js"></script>

2.选择容器

<div className="app-content" ref={this.refContainer} />

我用了ref进行对象的关联

  refContainer = (container) => {
    this.container = container;
  };

3.创建graf对象

container关联你的容器，通过width、height等配置画布属性，grid为添加网格。

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

const graph = new Graph({
  container: this.container,//你自己的容器
  width: 800,
  height: 600,
  background: {
    color: '#fffbe6', // 设置画布背景颜色
  },
  grid: {
    size: 10,      // 网格大小 10px
    visible: true, // 渲染网格背景
  },
});

这样你就会拥有一块高为600px，宽为800px的网格画布。  graph.zoom(factor: number) 和 graph.translate(tx: number, ty: number) 可以缩放和平移画布。

4.制作节点

类似于上图，我再画布中加入了两个矩形按钮。官方在 X6 的 Shape 命名空间中内置了一些基础图形，如 Rect、Edge、Circle 等，这些图形最终都有共同的基类 Cell，定义了节点和边共同属性和方法，如属性样式、可见性、业务数据等，并且在实例化、定制样式、配置默认选项等方面具有相同的行为，也就是可以使用同样的方法来配置。 创建完实例对象后，通过graph.addNode(实例名);即可在画布中添加一个实例。

//按钮CK
const CK = new Shape.Rect({
      x: 290,
      y: -200,//x轴和y轴位置
      width: 100,
      height: 40,//长和宽
      attrs: {
        value: {
          value: 'CK'
        },
        body: {
          fill: '#2ECC71', // 背景颜色
          stroke: '#000' // 边框颜色
        },
        label: {
          text: 'CK', // 文本
          fill: '#333', // 文字颜色
          fontSize: 13 // 文字大小
        }
      }
    });
    const re = new Shape.Rect({
      x: 290,
      y: -130,
      width: 100,
      height: 40,
      attrs: {
        value: {
          value: 're'
        },
        body: {
          fill: 'gray', // 背景颜色
          stroke: '#000' // 边框颜色
        },
        label: {
          text: '清空', // 文本
          fill: '#333', // 文字颜色
          fontSize: 13 // 文字大小
        }
      }
    });
    graph.addNode(CK);
    graph.addNode(re);

使用同样的方式即可在画布的任意添加不同样式实例，实例的样式可以通过修改attrs，lable，fontsize等来配置。