x6入门教程

X6 是 AntV 旗下的图编辑引擎，提供了一系列开箱即用的交互组件和简单易用的节点定制能力，方便我们快速搭建流程图、DAG 图、ER 图等图应用。

安装

通过 npm 或 yarn 命令安装 X6。

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

# yarn
$ yarn add @antv/x6

安装完成之后，使用 import 或 require 进行引用。

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

如果是直接通过 script 标签引入，可以这样写：

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

开始使用

接下来我们就一起来创建一个最简单的 Hello --> World 应用。

第 1 步：创建容器

在页面中创建一个用于容纳 X6 绘图的容器，可以是一个 div 标签。

<div id="container"></div>

第 2 步：准备数据

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

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: 160,      // Number，必选，节点位置的 x 值
      y: 180,      // Number，必选，节点位置的 y 值
      width: 80,   // Number，可选，节点大小的 width 值
      height: 40,  // Number，可选，节点大小的 height 值
      label: 'world', // String，节点标签
    },
  ],
  // 边
  edges: [
    {
      source: 'node1', // String，必须，起始节点 id
      target: 'node2', // String，必须，目标节点 id
    },
  ],
};

第 3 步：渲染画布

首先，我们需要创建一个 Graph 对象，并为其指定一个页面上的绘图容器，通常也会指定画布的大小。

import { Graph } from '@antv/x6';
// 使用 CDN 引入时暴露了 X6 全局变量
// const { Graph } = X6

const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
});

如果是通过 script 标签引入方式，我们的 Graph 对象是挂载在 X6 这个全局变量下面：

<script src="https://unpkg.com/@antv/x6/dist/x6.js"></script>
<script>
  const graph = new X6.Graph({
    container: document.getElementById('container'),
    width: 800,
    height: 600,
  });
</script>

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

graph.fromJSON(data)

到此，我们就得到一个最简单的 Hello --> World 示例

在上面示例中，我们使用了默认图形 rect 来渲染节点，除此之外，在 X6 中也内置了 circle、ellipse、polygon 等基础图形，可以通过 shape 属性为节点指定渲染的图形

本文地址：https://www.tides.cn/p_charts-x6