antv/g6基本使用教程

安装 & 引用

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

1 在项目中使用 npm 包引入

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

npm install --save @antv/g6

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

import G6 from '@antv/g6';

2 在 HTML 中使用 CDN 引入

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

注意

在 {$version} 中填写版本号，例如 3.2.0；
最新版为 3.2.0，可以在 npm 查看最新版本；
详情参考 Github 分支：GitHub - antvis/G6: ♾ A Graph Visualization Framework in JavaScript 。

快速试用

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

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

Step 1 创建容器

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

div id="mountNode"></div>

Step 2 数据准备

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

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，必须，起始点 idtarget: 'node2' // String，必须，目标点 id}]
};

注意

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

Step 3 创建关系图

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

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

Step 4 配置数据源，渲染

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

最终的结果

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Tutorial Demo</title>
</head><body>/* 图的画布容器 */<div id="mountNode"></div>/* 引入 G6 */<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script><script>// 定义数据源const data = {// 点集nodes: [{id: 'node1',x: 100,y: 200}, {id: 'node2',x: 300,y: 200}],// 边集edges: [// 表示一条从 node1 节点连接到 node2 节点的边{source: 'node1',target: 'node2'}]};// 创建 G6 图实例const graph = new G6.Graph({container: 'mountNode', // 指定图画布的容器 id，与第 9 行的容器对应// 画布宽高width: 800,height: 500});// 读取数据graph.data(data);// 渲染图graph.render();</script>
</body></html>

antv/g6基本使用教程相关推荐

antv g6 禁止移动_antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
vue office在线编辑_VUE和Antv G6实现在线拓扑图编辑
我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. ...
antv g6 禁止移动_十 AntV
← Highcharts AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便.专业可靠.无限可能的数据可视化最佳实践. AntV 包括以下解决方案: G2:可视化引擎 G2Plot ...
vue中使用antv/g6 绘制关系图、结构图
使用antv/g6绘制关系图效果图代码实现 npm install @antv/g6 --save <template><div id="app">&l ...
关系图 antv G6
1.安装antv G6 npm install --save @antv/g6 # 或者 # pnpm install --save @antv/g6 2.引入antv G6 import G6 fr ...
antv G6 + react umi(vue,ng) 实现节点红点（badges）
在我们使用G6做知识图谱,topo图时,业务场景一般会涉及到告警的节点要有突出标识,所谓红点,因为G6内置是不自带此功能的(虽然Graphin是可以直接用的,但基于G6的react框架),这样我们可以 ...
ANTV/G6 绘制网络拓扑图
最近看其他项目绘制网络拓扑图用了vue-super-flow 绘制的不是太理想,所以自己研究了一下,尝试用antv/g6绘制了一下. 参看了官方api https://g6.antv.vision/z ...
AntV G6将节点修改成图片
1.在每个节点中添加图片代码布局如下: 实现效果如下图: 主要代码: defaultNode: { // 节点样式修改type: 'image', // 设置节点为图片size: [40, 40] ...
关于antV G6中的on事件、util.each事件及update方法等的使用总结
前言 antV G6相对而言是一个目前还处于较于不成熟的关系数据可视化引擎.因此在实习实现关系图的过程中遇到很大的坑.比如说高亮箭头及关联属性.关系图的缩放.以及由于G6是基于canvas原理所以无法 ...