AntV G6的学习笔记1（快速开始）

看g6官网的三个部分

1.教程模块中的核心概念

2.api模块

3.图表实例

在vue项目中 的使用

1.安装

npm install --save @antv/g6

2.引入

import G6 from '@antv/g6';

3.使用四步走

1. 创建容器

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

2. 准备数据（节点和边）

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

3. 创建关系图

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

4. 在关系图渲染在页面

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

后面我将从Graph，layout，元素，自定义元素， Shape Attr图形样式等的数据结构和实例方法展开学习