位置: IT常识 - 正文

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/g6antv/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模块)

  • 华为荣耀v20支持鸿蒙系统吗(华为荣耀v20支持扩展存储卡)

    华为荣耀v20支持鸿蒙系统吗(华为荣耀v20支持扩展存储卡)

  • 天猫超市翻牌取消了吗(天猫超市翻牌活动)

    天猫超市翻牌取消了吗(天猫超市翻牌活动)

  • 电脑launch是什么(电脑上launch是什么意思)

    电脑launch是什么(电脑上launch是什么意思)

  • 抖音拉入黑名单还能看到我的作品吗(抖音拉入黑名单对方会知道吗)

    抖音拉入黑名单还能看到我的作品吗(抖音拉入黑名单对方会知道吗)

  • oppo录屏不见了(oppo录屏没有了怎么办)

    oppo录屏不见了(oppo录屏没有了怎么办)

  • 红米note 7 pro耗电解决方法(红米note 7 pro省电技巧)

    红米note 7 pro耗电解决方法(红米note 7 pro省电技巧)

  • 解决qq群发红包异常(解决qq群发红包问题)

    解决qq群发红包异常(解决qq群发红包问题)

  • 网站与网页之间的区别(网站与网页的关系是什么?一般网站分为哪几类?)

    网站与网页之间的区别(网站与网页的关系是什么?一般网站分为哪几类?)

  • 服务端和客户端的区别(服务端和客户端怎么连接)

    服务端和客户端的区别(服务端和客户端怎么连接)

  • 毒app支持花呗吗(毒上用花呗有确认收货吗)

    毒app支持花呗吗(毒上用花呗有确认收货吗)

  • 苹果x自带耳机什么型号(苹果x自带耳机哪里产的)

    苹果x自带耳机什么型号(苹果x自带耳机哪里产的)

  • 手机怎样订高铁票(手机怎么订高铁票)

    手机怎样订高铁票(手机怎么订高铁票)

  • 乐视2手机卡顿怎么设置(乐视手机卡顿反应慢怎么办)

    乐视2手机卡顿怎么设置(乐视手机卡顿反应慢怎么办)

  • 微信悬浮窗怎么开(微信悬浮窗怎么打开苹果)

    微信悬浮窗怎么开(微信悬浮窗怎么打开苹果)

  • word 增加新的一条目录(word新加一页怎么设置)

    word 增加新的一条目录(word新加一页怎么设置)

  • iphonex辅助键怎么调出来(iponex辅助按钮)

    iphonex辅助键怎么调出来(iponex辅助按钮)

  • 微信怎么查看出行历史(微信怎么查看出行轨迹)

    微信怎么查看出行历史(微信怎么查看出行轨迹)

  • 在拼多多怎么看账号(在拼多多怎么看一共花了多少钱)

    在拼多多怎么看账号(在拼多多怎么看一共花了多少钱)

  • 呼叫前转是被拉黑了吗(呼叫转移是拉黑了吗)

    呼叫前转是被拉黑了吗(呼叫转移是拉黑了吗)

  • lld-al20是什么型号(lda-al20是什么型号)

    lld-al20是什么型号(lda-al20是什么型号)

  • 小米桌面云备份是什么(小米桌面云备份可以删吗)

    小米桌面云备份是什么(小米桌面云备份可以删吗)

  • 红米k20pro有没有nfc(红米k20Pro有没有红外)

    红米k20pro有没有nfc(红米k20Pro有没有红外)

  • cdr名片设计底纹怎么不能改色(cdr怎么制作名片背景颜色)

    cdr名片设计底纹怎么不能改色(cdr怎么制作名片背景颜色)

  • win10没有ie浏览器(win10ie浏览器没有internet选项)

    win10没有ie浏览器(win10ie浏览器没有internet选项)

  • OS X Yosemite怎么样 OS X Yosemite上手体验评测(osXYosemite怎么更新)

    OS X Yosemite怎么样 OS X Yosemite上手体验评测(osXYosemite怎么更新)

  • 第8章 后处理 MATLAB学习笔记(后处理作用)

    第8章 后处理 MATLAB学习笔记(后处理作用)

  • 帝国cms后台登录次数不超过5次限制(帝国cms怎么样)

    帝国cms后台登录次数不超过5次限制(帝国cms怎么样)

  • phpcms后台是什么(php cms)

    phpcms后台是什么(php cms)

  • 机票抵扣进项只能在发生当月吗
  • 住宿费电子发票样式
  • 间接持股比例怎么
  • 小微企业的增值税怎么算
  • 总分机构汇算清缴成功后还需要填表什么报表
  • 财务费用利息收入借方为负数是什么意思
  • 被代持股份怎么退出
  • 补记以前年度折旧
  • 银行存款收款凭证是原始凭证吗
  • 个人所得税退税多久到账
  • 企业销售净利润较低说明什么
  • 单利和复利的计算区别
  • 利息 财务费用
  • 样品开发费用怎么记账
  • 车辆保险分期分摊怎么做账?
  • 计提成本账务处理
  • 顶账物品都有哪些
  • 农产品的增值税率
  • 增值税专用发票有几联?
  • thinkphp5控制器
  • win10错误代码0xc0000001
  • php到底是什么
  • php bcsub
  • PHP:pg_prepare()的用法_PostgreSQL函数
  • php基础编程题
  • 废品损失属于产品生产成本吗
  • php怎么创建项目
  • 所得税年度报表资产总额
  • vue2升级3
  • 哪些支出可以计入成本科目
  • 纳税申报表填写说明
  • 【Spring+SpringMVC+Mybatis】Spring+SpringMVC+Mybatis实现前端到后台完整项目
  • css设置3d
  • arptables命令详解
  • 其他综合收益转入盈余公积和未分配利润
  • 微擎框架安装教程
  • 不是销售类的工作可以做什么
  • 销售商品的收入属于收入吗
  • 食堂洗碗机操作规程
  • 建筑施工企业适用什么会计制度
  • sqlserver获取数据库名
  • 可抵扣进项税的普通发票
  • 开票限额相关规定最新
  • 增值税中进项税额转出是什么意思
  • 发行股票的好处和坏处
  • 无形资产摊销完以后得账务处理
  • 会计报表作用 镜
  • 固定资产计提折旧是什么意思
  • 勾选认证能够勾选当月
  • 政府补助怎么记账
  • 建设工程施工管理
  • 2019年新政府会计准则解读
  • 冲减坏账准备的金额怎么计算
  • 购买药材的发票如何抵扣?
  • 工会经费以前没交现在怎么补交
  • 银行存款日记账电子表格模板
  • 商业企业批发商是什么
  • mysql5.7版本下载
  • 雨林木风 u盘
  • archlinux安装zsh
  • kali linux 视频教程
  • win8默认输入法设置
  • xp怎么关闭自启动
  • windows8关机在哪里
  • win1020h2版好不好
  • win7系统笔记本摄像头在哪里打开
  • win 10文件
  • linux ftp搭建教程
  • win10系统语言包安装方法
  • 批处理操作
  • perl怎么把字符串变为数字
  • NGUI之UIGrid
  • python编程入门指南
  • python最简单
  • python如何用pi
  • 执法服务不到位
  • 财务审计报告出现数据错误怎么处理
  • 开票项目信息分类查询
  • 纳税人如何划分
  • 机场停车票怎么取得
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设