AnV-X6使用及总结
目录
- 1 简介
- 2 安装
- 3 基础概念
- 3.1 画布Graph
- 3.2 基类Cell
- 3.3 节点Node
- 3.4 边Edge
- 4 使用
- 4.1 创建节点
- 4.2 节点连线
- 4.3 事件系统
- 5 总结
1 简介
AntV是一个数据可视化(https://x6.antv.antgroup.com/)的工具(https://antv.vision/zh/ ),可以方便的创建图表或者其他图形,让我们的页面开发比较轻松的让数据可视化。进入网站后,我们可以看到七个模块:

G2:数据驱动,高度易用,可扩展的可视化图形语法
S2:开箱即用的多维可视分析表格
G6:便捷的关系数据可视化引擎与图分析工具
X6:极易定制、开箱即用、数据驱动的图编辑引擎
L7:高性能、高渲染质量的地理空间数据可视化框架
F2:专注于移动端的可视化解决方案,兼容
H5/小程序/Weex 等多端环境 AVA:AVA 是为了更简便的可视分析而生的技术框架
2 安装
通过npm或yarn 命令安装x6
# npm
$npm install @anv/x6 --save
# yarn
$yarn add @antv/x6
安装完成之后,使用import或require进行引用。
import { Graph } from 'antv/x6'
3 基础概念
3.1 画布Graph
在x6中,Graph是图的载体,它包含图上的所有元素(节点、边等),同时挂载了图的相关操作(如交互监听、元素操作等)。
const graph = new Graph({panning:true //支持平移selecting: {enabled: true, //支持选中multiple: true,movable: true, //支持拖动}
}
graph.zoom(0.2) //在原来缩放级别上增加0.2
graph.zoom(-0.2) //在原来缩放级别上减少0.2
3.2 基类Cell
基类Cell定义了节点和边共同属性和方法,如属性样式、可见性、业务数据。

cell有一些基础选项:

3.3 节点Node
node是所有节点的基类,继承自Cell,并定义了节点的通用属性和方法。
size:定义节点大小,是一个包含width和height属性的对象,可以通过size()方法来获取和设置节点大小。
position:节点位置,是一个包含x和y属性的对象。
angle:节点的旋转角度,旋转中心为节点的中心。
3.4 边Edge
source: 源对象。
target: 目标对象。source 和 target 都可以是任何元素,区别是,source 是起点,target 是终点。 例如,con-nector 中的箭头总是从 source 指向 target。
connector: 连接线。
vertices:路径点,是一个数组。边从起点开始,按顺序经过路径点,最后到达终点。
4 使用
4.1 创建节点
1.使用构造函数。 X6 的 Shape 命名空间中内置了一些基础节点,如 Rect、Circle、Ellipse 等,可以使用这些节点的构造函数来创建节点。
import { Shape } from '@antv/x6'// 创建节点
const rect = new Shape.Rect({x: 100,y: 200,width: 80,height: 40,angle: 15,attrs: {body: {fill: '#2ECC71', // 背景颜色stroke: '#000', // 边框颜色},label: {text: 'coldchain', // 文本fill: '#333', // 文字颜色fontSize: 13, // 文字大小},},
})// 添加到画布
graph.addNode(rect)

2.使用VUE节点
Graph.registerNode("my-count", { //将vue组件注册到系统中inherit: "vue-shape", //指定节点类型为vue-shapex: 200,y: 150,width: 150,height: 100,component: {template: `<Count />`,components: {Count,},},
});graph.addNode({id: "1",shape: "my-count", //将节点的 shape 属性指定为注册的节点名称x: 400,y: 150,width: 150,height: 100,data: {num: 0,},
});
这样,我们就可以自定义节点,大大增加了节点的可扩展性。
4.2 节点连线
const rect1 = graph.addNode({x: 30,y: 30,width: 100,height: 60,label: 'hello',id:'coldChain01',ports: [ //设置连接桩{ id: 'port1' }, { id: 'port2' },],})const rect2 = graph.addNode({x: 400,y: 240,width: 100,height: 60,label: 'world',id:'coldChain02',ports: [{ id: 'port3' }, { id: 'port4' },],})graph.addEdge({source: {cell:'coldChain01',port:'port1'}, //起点id和连接桩id target: {cell:'coldChain02',port:'port3'}, //终点id和连接桩id vertices: [{ x: 100, y: 200 },{ x: 300, y: 120 },],})}

4.3 事件系统
antv-x6支持丰富的鼠标事件,如下:

graph.on('cell:click', ({ e, x, y, cell, view }) => { })
通过graph.on函数即可实现对事件的监听,例如流程图中就用到了单击、双击、鼠标移入、移出等事件。除此之外,antv-x6还支持自定义事件。
node.attr({// 表示一个删除按钮,点击时删除该节点image: {event: 'node:delete',xlinkHref: 'trash.png',width: 20,height: 20,},
})
graph.on('node:delete', ({ view, e }) => {e.stopPropagation()view.cell.remove()
})

5 总结
antv-x6是一个功能强大、可扩展性高的可视化工具,提供了一系列开箱即用的交互软件和简单易用的节点定制能力,能够帮助使用者便捷地创建流程图、ER图等交互性较强的应用。本次分享介绍了x6的基本功能,更多高级功能有待我们进一步学习和探索。
相关文章:
AnV-X6使用及总结
目录 1 简介2 安装3 基础概念3.1 画布Graph3.2 基类Cell3.3 节点Node3.4 边Edge 4 使用4.1 创建节点4.2 节点连线4.3 事件系统 5 总结 1 简介 AntV是一个数据可视化(https://x6.antv.antgroup.com/)的工具(https://antv.vision/zh/ …...
Go 围炉札记
文章目录 一、安装二、文档三、使用 一、安装 VSCode 和 CLion 为 Go 开发配置Visual Studio Code | Microsoft Learn VScode下配置Go语言开发环境【2023最新】 基础篇:新手使用vs code新建go项目 vscode里安装Go插件和配置Go环境 GO 笔记 Golang 配置代理 golang…...
数据分析回头看2——重复值检查/元素替换/异常值筛选
0、前言: 这部分内容是对Pandas的回顾,同时也是对Pandas处理异常数据的一些技巧的总结,不一定全面,只是自己在数据处理当中遇到的问题进行的总结。 1、当数据中有重复行的时候需要检测重复行: 方法:使用p…...
什么是OSPF?为什么需要OSPF
【微|信|公|众|号:厦门微思网络】 【微思网络www.xmws.cn,成立于2002年,专业培训21年,思科、华为、红帽、ORACLE、VMware等厂商认证及考试,以及其他认证PMP、CISP、ITIL等】 什么是OSPF? 开放式最短路径优…...
轻量级的日志采集组件 Filebeat 讲解与实战操作
文章目录 一、概述二、Kafka 安装三、Filebeat 安装1)下载 Filebeat2)Filebeat 配置参数讲解3)filebeat.prospectors 推送kafka完整配置1、filebeat.prospectors2、processors3、output.kafka 4)filebeat.inputs 与 filebeat.pros…...
C# 委托和事件
C# 委托和事件 委托匿名方法事件 委托 当要把方法传送给其他方法时,需要使用委托。首先定义要使用的委托,对于委托,定义它就是告诉编译器这种类型的委托代表了哪种类型的方法,然后创建该委托的一个或多个实例。编译器在后台将创建…...
数据结构与算法之字典: Leetcode 349. 两个数组的交集 (Typescript版)
两个数组的交集 https://leetcode.cn/problems/intersection-of-two-arrays/description/ 题目和解题参考 https://blog.csdn.net/Tyro_java/article/details/133279737 使用字典来解题的算法实现 字典:顾名思义,像新华字典一样可查找,基…...
day-56 代码随想录算法训练营(19)动态规划 part 16
538.两个字符串的删除操作 思路一: 1.dp存储:以word1[i-1]结尾,word2[j-1]结尾,最少进行dp[i][j]次操作2.动态转移方程: if(word1[i-1]word2[i-1]) dp[i][j]dp[i-1][j-1]; else dp[i][j]min(dp[i-1][…...
蓝桥等考Python组别四级005
第一部分:选择题 1、Python L4 (15分) 字符“0”的ASCII码值为48,则字符“5”的ASCII码值为( )。 3953120240正确答案:B 2、Python L4 (15分) 下面哪个是Python中正确的变量名?( ) ABC#sup01Trueif正确答案:B...
【Linux】diff 命令
【Linux】diff 命令——并排格式输出 功能 diff 以逐行的方式,比较文本文件的异同处。 如果指定要比较目录,则 diff 会比较目录中相同文件名的文件,但不会比较其中子目录 diff [参数] [文件A] [文件B]diff [参数] [目录A] [目录B]【参数】…...
【51单片机】9-定时器和计数器
1.定时器的介绍 1.什么是定时器 (1)SoC的一种内部的外设【在单片机里面,但是在CPU外面】 (2)定时器就是CPU的”闹钟“ 2.什么是计数器 (1)定时器就是用计数的原始实现的 (2…...
2023年海南省职业院校技能大赛(高职组)信息安全管理与评估赛项规程
2023年海南省职业院校技能大赛(高职组) 信息安全管理与评估赛项规程 一、赛项名称 赛项名称:信息安全管理与评估 英文名称:Information Security Management and Evaluation 赛项组别:高等职业教育 赛项归属产业&…...
大模型深挖数据要素价值:算法、算力之后,存储载体价值凸显
文 | 智能相对论 作者 | 叶远风 18.8万亿美元,这是市场预计2030年AI推动智能经济可产生的价值总和,其中大模型带来的AI能力质变无疑成为重要的推动力量。 大模型浪潮下,业界对AI发展的三驾马车——算力、算法、数据任何一个维度的关注都到…...
AI文章,AI文章生成工具
在互联网时代,随着信息爆炸式增长,文章的需求愈发旺盛。从博客、新闻、社交媒体到企业宣传,文字作为传达信息、吸引受众的工具变得愈发重要。但问题是,对于很多人来说,创作一篇高质量的文章并不容易。时间、创意、写作…...
mac有必要用清理软件吗?有哪些免费的清理工具
当我们谈到Mac电脑时,很多人都会觉得它比Windows系统更加稳定和高效,也更不容易积累垃圾文件。但实际上,任何长时间使用的操作系统都会逐渐积累不必要的文件和缓存。那么,对于Mac用户来说,有必要使用专门的清理软件吗&…...
React 全栈体系(十八)
第九章 React Router 6 二、代码实战 6. 路由的 params 参数 6.1 routes /* src/routes/index.js */ import About from "../pages/About"; import Home from "../pages/Home"; import Message from "../pages/Message"; import News from &q…...
TCP/UDP
TCP:可靠的有序传输 TCP是一种面向连接的协议,旨在提供可靠、有序的数据传输。它通过以下方式实现这一目标: 1. 连接建立和维护 在使用TCP传输数据之前,必须先建立连接。这个过程包括三次握手,即客户端和服务器之间…...
c++内存对齐
原文在这里。https://blog.csdn.net/WangErice/article/details/103598081 但是内容有错误。我在自己的这里修改并变成红色了。 内存在使用过程并不是单一的依次排列,而是按照某种既定的规则来进行对齐,以方便快速访问.内存的对齐原则有以下三条&#…...
leetcode 33. 搜索旋转排序数组
2023.9.26 本题暴力法可以直接A,但是题目要求用log n的解法。 可以想到二分法,但是一般二分法适用于有序数组的,这里的数组只是部分有序,还能用二分法吗? 答案是可以的。因为数组是经过有序数组旋转得来的,…...
VCS flow学习
VCS VCS 是IC从业者常用软件,该篇文章是一个学习记录,会记录在使用过程中各种概念及options。 VCS Flow VCS Flow 可以分为Two-step Flow和Three-step Flow两类。 两步法 两步法只支持Verilog HDL和SystemVerilog的design,两步法主要包括…...
Cadence导出Gerber文件保姆级教程:从Database Check到嘉立创预览,一步不落
Cadence导出Gerber文件全流程实战:从设计验证到生产准备的深度指南 第一次在Cadence Allegro中导出Gerber文件时,那种面对几十个参数选项的手足无措感我至今记忆犹新。作为电子设计自动化(EDA)领域的工业标准工具,Cadence的强大功能背后是复杂…...
实测对比:openEuler三大桌面环境UKUI/DDE/XFCE安装体验与性能消耗
实测对比:openEuler三大桌面环境UKUI/DDE/XFCE安装体验与性能消耗 当技术决策者面对openEuler操作系统时,桌面环境的选择往往成为影响工作效率的关键因素。本文将基于openEuler 24.03 LTS环境,深度实测UKUI、DDE和XFCE三大主流桌面环境&…...
阿里云轻量应用服务器上5分钟搞定EMQ X MQTT集群搭建(附性能调优技巧)
阿里云轻量应用服务器上5分钟构建高可用EMQ X MQTT集群 物联网应用的爆发式增长让MQTT协议成为设备连接的首选方案。对于需要处理海量设备连接的企业开发者而言,单节点MQTT服务器早已无法满足高并发和容灾需求。本文将带你在阿里云轻量应用服务器上快速部署EMQ X集群…...
Uvicorn与Packet.net:高性能服务器部署Python服务的完整指南
Uvicorn与Packet.net:高性能服务器部署Python服务的完整指南 【免费下载链接】uvicorn An ASGI web server, for Python. 🦄 项目地址: https://gitcode.com/GitHub_Trending/uv/uvicorn Uvicorn是一个专为Python设计的ASGI Web服务器,…...
互联网大厂Java求职者面试全解析:技术点与场景详解
面试场景介绍 本文通过一场严肃的面试官与搞笑的水货程序员谢飞机之间的面试对话,带你深入了解互联网大厂Java面试的全套流程。涵盖Java核心语言与平台、Spring生态、微服务、安全、消息队列等热点技术,融合多种业务场景,如电商、内容社区、在…...
League-Toolkit启动故障系统性排查方案:从现象到根治的完整解决路径
League-Toolkit启动故障系统性排查方案:从现象到根治的完整解决路径 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 问…...
别再为长文档发愁了!用DeepSeek-OCR + 单块A100,5步搞定古籍/财报批量识别
单块A100实战指南:用DeepSeek-OCR高效处理古籍与财报的5个关键步骤 当某省级图书馆需要数字化10万页明清古籍时,技术团队发现传统OCR方案需要3个月才能完成,而采用DeepSeek-OCR配合单块A100的方案,仅用11天就交付了准确率92%的数…...
打破单模态壁垒:SillyTavern多模态交互功能深度解析
打破单模态壁垒:SillyTavern多模态交互功能深度解析 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 当你尝试向AI描述一幅复杂的场景,却发现文字难以捕捉光影的微妙…...
从像素到对象:如何用HANet和SNUNet搞定遥感影像中的‘小目标’与‘不平衡’难题?
从像素到对象:HANet与SNUNet在遥感影像小目标检测中的实战解析 当洪水退去后的灾损评估卫星图上,那些被冲毁的农舍屋顶往往只占据几个像素;在城市违建监测中,新增的违章建筑可能只是高分辨率影像中的微小色块。这些"小目标&q…...
SenseVoice-small保姆级教程:Mac/Windows本地快速启动WebUI步骤
SenseVoice-small保姆级教程:Mac/Windows本地快速启动WebUI步骤 你是不是也遇到过这样的场景?开完会想整理录音,发现要上传到云端才能转文字,担心隐私泄露;或者想给视频加字幕,但手动打字太费时间…...
