g6-跑起来需要在 test.html 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会

首先要把g6跑起来阅读帮助文档 g6.antv.vision/zh/docs/man… 然后让看快速上手 g6.antv.vision/zh/docs/man… 下面是快速上手的操作步骤

在代码目录下创建g6-test项目文件夹使用vscode更方便 npm install --save @antv/g6 # 这就安装了g6库 在 test.js 里导入库 import G6 from '@antv/g6'; cdn版本的

创建容器

需要在 test.html 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。 <div id="mountNode"></div>

数据准备

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

const data = {
    nodes: [{}, {},],
    edges: [{}, {},],
};

创建关系图

创建关系图（实例化）时，至少需要为图设置容器、宽和高。把下面这些添加到 test.js

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

配置数据源，渲染

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

运行CDN版本

代码 github.com/eatcosmos/g…

用npm的不知道怎么运行，应该是用的react 这里按照教程把代码都拷贝到test-js.html，是可以运行的

运行NPM版本

changelog

2020年12月15日运行test-js.html