Antv G6 版本号4.x创建节点和边

于 2025-02-12 15:54:30 发布
阅读量318 收藏 5
点赞数 5
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Gunba1/article/details/145593394
版权

首先，建议大家还是使用4.x版本吧，网上的帖子多点，有问题好查找。最主要是5.x跟4.x的参数、配置、api啥子的差别太多了。折腾了一上午，还是4.x好用。

描述一下需要实现的功能：

  1. 节点里面显示阿里巴巴矢量图标 官方也是用的这个图标库
  2. 移动节点添加到画布上
  3. 创建边
  4. 删除节点及节点所关联的边
  5. 删除边

主要的功能是以上5个，其他的样式配置，可以看代码的实现或者官网找一下。

实现效果：

如有朋友需要，可以直接下载我的demo，拿着用。
VUE3+Antv G6 4.x版本demo: 实现功能：1.节点里面显示阿里巴巴矢量图标2.移动节点添加到画布上3.创建边4.删除节点及节点所关联的边5.删除边https://gitee.com/xu-renfeng/vue3-antv-g6-4.-x-version-demo
vue3使用AntV G6 (图可视化引擎)历程[一]
在路上`的博客
01-23 2164
G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等基础的图可视化能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
antV之初始G6
yangchunshang的博客
06-07 1万+
1、什么是G6？G6是关系数据可视化引擎，开发者可以基于G6扩展出属于自己的图分析应用或图编辑器应用。2、安装方法   （1）通过引入在线脚本资源<!-- 引入在线资源 --> <script src="https://gw.alipayobjects.com/os/antv/assets/g6/2.0.0/g6.js"></script>    （2）通过引入...
可视化引擎Antv G6初体验
Tiffany886的博客
10-23 1889
可视化引擎Antv G6初体验
vue2.x版本项目使用antv g6 缩进树
wbshfjr的博客
12-06 867
orgTags: "1,8,4,9", // 实际业务要根据后端返回的orgTags给每个节点item设置对应的borderColor、backgroundColor、icons。单节点(包含分支机构)多节点含下级企业单节点
AntV G6（一）初体验
weixin_44783888的博客
12-23 3974
AntV G6（一）初体验 文章目录AntV G6（一）初体验前言一、G6是什么？二、快速上手1.安装 & 引用2.使用步骤 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、G6是什么？ G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的
AntV-G6手动添加节点和边，实现拓扑图的可视化展示
小阮的笔记本
03-27 4928
g6手动添加节点和边，修改节点和边信息，获取拓扑图节点和边信息
antv g6 摸索总结—新手入门
热门推荐
想卷回去的小菜鸡的博客
07-06 1万+
通过antvG6官网内置API实现树图的加载绚烂，以及对各个属性进行详细讲解，把过程中遇到的问题以及解答方案一一列举，随着各种需求，不断更新。
antv G6 5版本tooltip自定义node节点显示
qq_43219642的博客
07-16 1109
antv G6 5版本tooltip自定义node节点显示。
antv/g6 节点、及自定义节点
study_way的博客
11-01 7466
若内置节点无法满足需求，还可以通过 G6.registerNode(typeName: string, nodeDefinition: object, extendedNodeType?: string) 进行自定义节点，方便开发更加定制化的节点，包括含有复杂图形的节点、复杂交互的节点、带有动画的节点等。// 计算五角星每个角的弧度i < n;i++) {// 节点的大小attrs: {
antvG6绘制树形图踩坑记录（自定义节点等功能）
Mr__proto__的博客
02-24 2877
antvg6 树状图 vue2
antv/G6使用记录，vue组件实现节点、边的动态增减、右键事件等功能
lookingForw_4585的博客
08-04 1万+
 antv/G6是蚂蚁金服数据可视化团队出品的一个功能完备的图可视化引擎。  介于业务需要，最近在学习G6,特此记录下~~  简单展示： 功能点： 连接关系图表 鼠标控制缩放 节点拖动事件 画布拖动事件 边的状态切换 节点层级展示 边的动态增加 还原视图 特性：   状态：G6中提供了状态管理，指的是节点或边的状态，包括交互状态和业务状态。   动画：动画是可视化中非常重要的内容，本例中涉及到边的动画效果   字体图标：本例中使用iconfont，具体实现参照G6官方文档，比较的详细  
vue：antV | G6的超级详细使用（包括基本使用、示例使用、自定义节点以及增删改查功能的灵活应用）
qq_45796592的博客
12-21 1万+
一文掌握G6的详细使用（包括基本使用、示例使用、自定义节点以及增删改查功能的灵活应用）
【前端学习】AntV G6-07 深入图形与图形分组、自定义节点、节点动画（上、中）
gaowxx的博客
09-04 1089
通过G6.registerNode方法，绘制基于 rect 的自定义卡片
AntV G6图：鼠标悬浮节点显示锚点、拖拽创建边
Miss_Y0的博客
11-18 1067
*** 鼠标悬浮显示锚点*/return {},// 获取锚点信息// 节点的宽，这里写死的，可以自己获取或修改// 节点的高// 在节点外部绘制锚点（小圆圈）// 添加锚点attrs: {x: cx,y: cy,r: 6, // 锚点半径stroke: "#93aef9", // 锚点描边颜色fill: "#5b8ff9", // 锚点填充颜色},});});},// 移除显示的锚点group});},});/**
AntV G6的安装与搭建
笑到世界都狼狈的博客
12-22 9269
项目中有遇到一个偏展示，但echarts的graph实现效果又不是很理想，所以就研究了antv G6,到目前为止支持的还可以，所以写几篇文件记录一下学习G6的过程 antv官网 首先，我在官网例子中找到了G6,感觉G6比较适合我们现在的拓扑图需求，所以就开始了一些简单的研究 官网的快速上手 1.安装与引用 <1>使用npm安装与引用 （1）在项目中使用npm包引入，需要使用如下命令安装g6 npm install --save @antv/g6 具体效果如下图所示： ..
Antv G6超详细笔记及使用案例分享
m0_73884922的博客
06-22 4865
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
AntV 引擎 G6 与 X6
qq_34626688的博客
10-23 2657
antv G6 与 X6
根据元数据血缘展示场景要求，进行前端组件选型，并形成选型评审文档
最新发布
03-18
### 一、元数据血缘展示场景下的前端组件需求 在元数据血缘展示的场景下，前端组件需要满足以下几个核心功能和技术要求： 1. **图谱可视化能力** 血缘关系本质上是一种复杂的网络结构，因此需要支持大规模节点和边的关系绘制。能够清晰表达实体之间的依赖关系以及流向是基本要求[^1]。 2. **交互性** 用户可能希望动态查询某个特定节点的相关上下游信息或者筛选某些条件的数据流路径。这就意味着所选框架需具备良好的事件绑定机制和支持多种操作模式（如缩放、拖拽等）的能力[^2]。 3. **性能优化** 当处理非常庞大的数据集时，渲染效率成为关键考量因素之一。优秀的图形库应该提供分层加载、懒加载等功能来提升用户体验并降低资源消耗。 4. **可扩展性和定制化程度** 不同企业对于血缘图的表现形式可能存在个性化需求，比如颜色编码规则、图标样式定义等等。所以理想的解决方案应当允许开发者灵活调整外观属性以适配具体业务逻辑。 --- ### 二、推荐的前端组件及其特点对比 以下是几个适用于元数据血缘展示场景的热门开源或商业图表/图形类JavaScript库介绍及优劣分析： #### 1. G6 (AntV系列的一部分) - **优点**: 提供丰富的内置布局算法；强大的API接口便于实现复杂交互效果；由阿里巴巴团队维护更新频繁稳定可靠。 - **缺点**: 学习曲线相对较陡峭，初学者上手难度较大。 - **适用范围**: 特别适合构建高度自定义的企业级应用界面. ```javascript // 示例代码片段：G6 创建简单图实例 const graph = new G6.Graph({ container: 'mountNode', // 指定DOM容器ID width: 800, height: 600, }); graph.data({ nodes:[...], edges:[...] }); // 加载数据模型 graph.render(); ``` #### 2. Cytoscape.js - **优点**: 支持多样的视觉风格设置选项；拥有活跃社区贡献大量插件拓展基础功能边界。 - **缺点**: 对于超大型网络可能会遇到内存溢出等问题。 - **适用范围**: 如果项目更注重灵活性而非极致速度表现的话可以考虑采用它作为技术栈一部分. #### 3. D3.js - **优点**: 极高的自由度让设计师几乎不受限地创造独一无二的作品；广泛应用于科研领域发表论文中的高质量图像制作过程之中。 - **缺点**: 编写起来较为繁琐耗时较长不适合快速原型开发阶段使用。 - **适用范围**: 更加倾向于学术研究或者是追求艺术美感的设计场合当中去部署实施. --- ### 三、选型评审文档模板设计思路 一份完整的《前端组件选型评审报告》通常应包含如下部分: 1. **背景说明** 描述当前面临的技术挑战是什么？为什么需要引入新的工具链？ 2. **候选方案列举** 列举所有经过初步调研认为可行的产品名称版本号等相关基本信息。 3. **评估维度设定** 明确指出本次决策过程中重点考察哪些方面特性参数权重分配情况如何? 4. **详细评分表填写** 根据既定标准逐一对各个备选项打分记录下来形成直观表格方便后续比较参考. 5. **最终结论阐述** 综合以上各项得分得出最优解建议理由充分有力令人信服即可完成整个流程撰写工作. ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值