快速上手

第一个示例

安装 & 引用

在项目中引入 G6 有以下两种方式：npm 引入，CDN 引入。

1 在项目中使用 npm 包引入

Step 1: 使用命令行在项目目录下执行以下命令：

  1.  npm install --save @antv/g6

Step 2: 在需要用的 G6 的 JS 文件中导入：

  1. import G6 from '@antv/g6';

2 在 HTML 中使用 CDN 引入

  1. <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

注意

快速试用

创建一个 G6 的关系图仅需要下面几个步骤：

  • 创建关系图的 HTML 容器；
  • 数据准备；
  • 创建关系图；
  • 配置数据源，渲染。

Step 1 创建容器

需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。

  1. <div id="mountNode"></div>

Step 2 数据准备

引入 G6 的数据源为 JSON 格式的对象。该对象中需要有节点（nodes）和边（edges）字段，分别用数组表示：

  1. const data = {
  2.   // 点集
  3.   nodes: [
  4.     {
  5.       id: 'node1', // String，该节点存在则必须，节点的唯一标识
  6.       x: 100, // Number，可选，节点位置的 x 值
  7.       y: 200, // Number，可选，节点位置的 y 值
  8.     },
  9.     {
  10.       id: 'node2', // String，该节点存在则必须，节点的唯一标识
  11.       x: 300, // Number，可选，节点位置的 x 值
  12.       y: 200, // Number，可选，节点位置的 y 值
  13.     },
  14.   ],
  15.   // 边集
  16.   edges: [
  17.     {
  18.       source: 'node1', // String，必须，起始点 id
  19.       target: 'node2', // String，必须，目标点 id
  20.     },
  21.   ],
  22. };

注意

  • nodes 数组中包含节点对象，唯一的 id 是每个节点对象中必要的属性，x、 y 用于定位；
  • edges 数组中包含边对象，source 和 target 是每条边的必要属性，分别代表了该边的起始点 id 与 目标点 id。
  • 点和边的其他属性参见链接：图元素配置文档。

Step 3 创建关系图

创建关系图（实例化）时，至少需要为图设置容器、宽和高。

  1. const graph = new G6.Graph({
  2.   container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
  3.   width: 800, // Number，必须，图的宽度
  4.   height: 500, // Number，必须，图的高度
  5. });

Step 4 配置数据源，渲染

  1. graph.data(data); // 读取 Step 2 中的数据源到图上
  2. graph.render(); // 渲染图

最终的结果

快速上手 - 图1

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Tutorial Demo</title>
  6. </head>
  7.     <body>
  8.     /* 图的画布容器 */
  9.     <div id="mountNode"></div>
  11.     /* 引入 G6 */
  12.     <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
  14.     <script>
  15.       // 定义数据源
  16.       const data = {
  17.         // 点集
  18.         nodes: [{
  19.           id: 'node1',
  20.           x: 100,
  21.           y: 200
  22.         },{
  23.           id: 'node2',
  24.           x: 300,
  25.           y: 200
  26.         }],
  27.         // 边集
  28.         edges: [
  29.           // 表示一条从 node1 节点连接到 node2 节点的边
  30.           {
  31.             source: 'node1',
  32.             target: 'node2'
  33.           }
  34.         ]
  35.       };
  37.       // 创建 G6 图实例
  38.       const graph = new G6.Graph({
  39.         container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应
  40.         // 画布宽高
  41.         width: 800,
  42.         height: 500
  43.       });
  44.       // 读取数据
  45.       graph.data(data);
  46.       // 渲染图
  47.       graph.render();
  48.     </script>
  49.   </body>
  50. </html>

React 中使用 G6

如果你想在 React 中使用 G6 ，可以参考我们提供了的 React 中使用 G6 的 [Demo]。(https://github.com/baizn/g6-in-react)

更多关于 React 中如何使用 G6，请参考React 中使用 G6 的文档，有任何问题都可以通过页面底部的钉钉交流群和我们沟通，也非常欢迎给我们提 Issues。

更多

本章仅仅介绍了如何安装以及最简单的场景，在 G6 Tutorial 中其他的章节中我们会教会你：

  • 实例化图时的常见配置；
  • 设置元素（节点/边）属性、样式；
  • 设置布局；
  • 增加交互；
  • 增加动画；
  • 使用辅助组件。

想了解更高阶的功能，请参见 G6 核心概念，G6 高级指引。