antv/g6基本使用教程(antvl7)

编辑：rootadmin

antv/g6基本使用教程安装 & 引用

推荐整理分享antv/g6基本使用教程(antvl7)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:antv x6官网,antvg6文档,antvg6文档,antvf2,antvr,antv g6教程,antvl7,antvf2,内容如对您有帮助，希望把文章链接给更多的朋友！

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

1 在项目中使用 npm 包引入

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

npm install --save @antv/g6 antv/g6基本使用教程(antvl7)

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，必须，起始点 id target: '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>

本文链接地址:https://www.jiuchutong.com/zhishi/285077.html 转载请保留说明！

上一篇：vue 高德地图添加多个点标记(vue3使用高德地图)

下一篇：【Timm】create_model所提供的ViT模型概览(tim模块)