AntV G6（一）初体验

AntV G6（一）初体验

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、G6是什么？

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。

二、快速上手

1.安装 & 引用

// 1 在项目中使用 NPM 包引入
npm install --save @antv/g6 //使用命令行在项目目录下执行以下命令
import G6 from '@antv/g6'; //在需要用的 G6 的 JS 文件中导入

// 2 在 HTML 中使用  CDN 引入
// version <= 3.2
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-{$version}/build/g6.js"></script>

// version >= 3.3
<script src="https://gw.alipayobjects.com/os/lib/antv/g6/{$version}/dist/g6.min.js"></script>

在 {$version} 中填写版本号，例如 3.7.1

2.使用步骤

1. 创建关系图的 HTML 容器；
2. 数据准备；
3. 创建关系图；
4. 配置数据源，渲染。

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

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

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

const data = {
  // 点集
  nodes: [
    {
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      x: 100, // Number，可选，节点位置的 x 值
      y: 200, // Number，可选，节点位置的 y 值
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
    },
  ],
  // 边集
  edges: [
    {
      source: 'node1', // String，必须，起始点 id
      target: 'node2', // String，必须，目标点 id
    },
  ],
};

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

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

• 配置数据源，渲染

graph.data(data); // 读取数据源到图上
graph.render(); // 渲染图