【使用antv g6实现拓扑图】
使用antv g6实现拓扑图
- 安装antv g6
- 创建一个 div,并制定必须的属性 id
- 定义初始化方法
- 定义node节点数据
- 将获取到的数据渲染进页面
安装antv g6
npm install @antv/g6 --save
import G6 from '@antv/g6';
创建一个 div,并制定必须的属性 id
定义好展示id,通过id获取dom数据
<div id="container" style="width: 100%;height: 800px"></div>
定义初始化方法
init() {const container = document.getElementById('container');//获取拓扑图的宽高const width = container.scrollWidth;const height = container.scrollHeight || 700;this.graph = new G6.Graph({// 使用 contextMenu plugins 时,需要将 container 设置为 position: relative;container: 'container',width,height,fitCenter: true,renderer: 'svg',linkCenter: true,// layout: {// type: 'dagre',// rankdir: 'LR', // 可选,默认为图的中心// align: 'DL', // 可选// nodesep: 20, // 可选// ranksep: 50, // 可选// controlPoints: true, // 可选// },//以中心为原点展示数据layout: {type: 'radial',// center: [ width/2, 400 ], // 可选,默认为图的中心linkDistance: 400, // 可选,边长maxIteration: 1000, // 可选unitRadius: 250, // 可选preventOverlap: true, // 可选,必须配合 nodeSizenodeSize: 300, // 可选strictRadial: true, // 可选sortBy: 'data',sortStrength: 150// workerEnabled: true // 可选,开启 web-worker},modes: {default: ['drag-canvas', 'drag-node', 'zoom-canvas'],},//设置node样式defaultNode: {type: 'image',size: 80,x: 760,y: 100,labelCfg: {fontsize: 20,style: {fontsize: 20}}},//设置线条的样式defaultEdge: {type: 'line',style: {startArrow: {path: G6.Arrow.vee(10, 12),d: 70,fill: '#f00',},stroke: '#5B8FF9',lineDash: [6, 3],},labelCfg: {refY: 15,// refX: 60,}}});//定义拓扑图节点的点击事件this.graph.on('node:click', (e) => {let item = e.item;let model = item.getModel();});},
定义node节点数据
let nodes =[{id:1,label: 第一个node,img: require('@/assets/img/icon-case.png'),//自定义node数据},{id:2,label: 第二个node,img: require('@/assets/img/icon-case.png'),//自定义node数据}
]
#定义edge数据
let edges = [{source: 1,target: 2,label: '关系'}
]
将获取到的数据渲染进页面
mounted() {this.init();let data = {nodes: nodes,edges: edges}this.graph.data(data);this.graph.render();},
相关文章:
【使用antv g6实现拓扑图】
使用antv g6实现拓扑图 安装antv g6创建一个 div,并制定必须的属性 id定义初始化方法定义node节点数据将获取到的数据渲染进页面 安装antv g6 npm install antv/g6 --save import G6 from antv/g6;创建一个 div,并制定必须的属性 id 定义好展示id&…...
【数学 函数空间】拉普拉斯变换解微分方程步骤
拉普拉斯变换解微分方程 拉普拉斯变换解微分方程的一般步骤如下: 写出微分方程。对微分方程两边应用拉普拉斯正变换。求解变换后的代数方程,得到 Y ( s ) Y(s) Y(s)。如果需要,进行部分分式分解。对 Y ( s ) Y(s) Y(s)进行拉普拉斯逆变换&…...
vue3: toRef, reactive, toRefs, toRaw
vue3: toRef, reactive, toRefs, toRaw <template><div>{{ man }}</div><hr><!-- <div>{{ name }}--{{ age }}--{{ like }}</div> --><div><button click"change">修改</button></div&g…...
Unity读取Json
参考 Unity读取Json的几种方法_unity读取json文件-CSDN博客...

基于STM32的智能语音识别饮水机系统设计
功能描述 1、给饮水机设定称呼,喊出称呼,饮水机回答:我在 2、语音进行加热功能,说:请加热,加热片运行 3、饮水机水位检测,低于阈值播报“水量少,请换水” 4、检测饮水机水温…...

c++的几种构造函数
c的几种构造函数 构造函数拷贝构造函数转换构造函数移动构造函数 析构函数 构造函数 C中的构造函数可以分为5类:默认构造函数、普通构造函数、拷贝构造函数、转换构造函数、移动构造函数。 好像还有委托构造 默认构造和普通构造和java基本一样 详细 拷贝构造函…...

FRP 实现内网穿透
如何通过 FRP 实现内网穿透:群晖 NAS 的 Gitea 和 GitLab 访问配置指南 在自建服务的过程中,经常会遇到内网访问受限的问题。本文将介绍如何利用 FRP(Fast Reverse Proxy)来实现内网穿透,以便在外网访问群晖 NAS 上的…...

数据结构笔记(其八)--一般树的存储及其遍历
1.知识总览 一般的树会有多个孩子,所以存储结构也会与二叉树略有不同。 一般树的遍历。 2.双亲表示法 双亲表示法,也是父亲表示法,即每个节点中都存储了其父节点的地址信息。 特性:可以轻易地找到父节点,但寻找孩子节…...

在spring boot工程中使用Filter时,@WebFilter 注解不生效的问题分析和解决方案
1. 问题描述 首先编写一个Filter类并通过Component放入spring容器中,通过实现jakarta.servlet中提供的Filter接口完成过滤器的创建,代码如下。 import jakarta.servlet.*; import jakarta.servlet.annotation.WebFilter; import org.springframework.st…...
浅谈“通感一体”
文章目录 5G_Advanced的关键技术通感一体的介绍通感一体应用通感一体面临的挑战 5G_Advanced的关键技术 2024年6月18日16点30分,在上海举行的3GPP RAN第104次会议上,R18标准正式冻结,标志着5G技术的又一重要里程碑。值得注意的是,…...

【Linux】监控系统Zabbix的安装与配置
文章目录 一、前期准备1、安装LAMP2、配置SELinux与防火墙3、测试Apache4、配置数据库5、创建zabbix数据库及应用 二、server端安装配置1、软件包安装2、配置数据库3、zabbix访问测试4、配置web界面 三、Agent端安装配置1、安装zabbix-agent2、配置3、启动zabbix-agent4、配置防…...
Springboot定时任务
Component EnableScheduling public class SpringBootTestJob {Scheduled(cron "0/5 * * * * ?")public void testScheduled(){System.out.println("SpringBootTestJob test");} }这段代码使用了 Spring Boot 自带的定时任务机制。解释如下: …...
node.js知识点总结
1、Node.js Node. js是一个基于 Chrome v8引擎的服务器端 JavaScript运行环境;Node. js是一个事件驱动、非阻塞式I/O的模型,轻量而又高效;Node. js的包管理器npm是全球最大的开源库生态系统。 2、数据处理中的buffer: 具体…...
Kotlin中泛型的协变
interface Shapeclass Circle : Shapefun main() {val shapes1: List<Shape> listOf<Circle>()val shapes2: MutableList<Shape> mutableListOf<Circle>() }如上代码,第一行赋值语句是OK的,第二行赋值语句在编辑器上直接就报错…...

第三百二十五节 Java线程教程 - Java Fork/Join框架
Java线程教程 - Java Fork/Join框架 fork/join框架通过利用机器上的多个处理器或多个内核来解决问题。 该框架有助于解决涉及并行性的问题。 fork/join框架创建一个线程池来执行子任务。 当线程在子任务上等待完成时,框架使用该线程来执行其他线程的其他未决子任…...
网络游戏安全现状及相关应对方案
中国网络游戏历经十余年的飞速发展,取得了显著成就,但与此同时,也陷入了诸多安全问题的泥沼。 一、中国网络游戏发展中的安全困境 (一)灰色产业链滋生 外挂、私服、盗号、打金工作室以及网络信息诈骗等灰色产业链在…...
uniapp h5地址前端重定向跳转
简单说下功能,就是在地址输入http://localhost:8080/home 会自行跳转到http://localhost:8080/pages/home/index,如果有带参数的话也会携带上去。 ps:只能在h5中使用 首先需要用到query-string 安装query-string npm install query-string…...
uniapp隐藏自带的tabBar
uniapp隐藏自带的tabBar 场景: 微信小程序在使用自定义tabBar组件时, 隐藏uniapp自带的tabBar <template> <!-- index页面 --> </template> <script setup> import { onShow } from /utils/wxUtils onShow(() > {uni.hideTabBar() // 隐藏自带的tab…...
使用--log-file保存pytest的运行日志
前面使用了tee和重定向来保存pytest的运行日志,这次使用--log-file,因为它可以配置日志的级别、格式和每行日志的生成时间。 pytest -q -s -ra --count100 test_open_stream.py --alluredir./report/CXL --log-filepytest_log.txt 【pytest.ini】 使用…...

WebAPI性能监控-MiniProfiler与Swagger集成
Net8_WebAPI性能监控-MiniProfiler与Swagger集成 要在.NET Core项目中集成MiniProfiler和Swagger,可以按照以下步骤操作: 安装NuGet包: 安装MiniProfiler.AspNetCore.Mvc包以集成MiniProfiler。安装MiniProfiler.EntityFrameworkCore包以监…...

IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...
Go 语言并发编程基础:无缓冲与有缓冲通道
在上一章节中,我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道,它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...

LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
离线语音识别方案分析
随着人工智能技术的不断发展,语音识别技术也得到了广泛的应用,从智能家居到车载系统,语音识别正在改变我们与设备的交互方式。尤其是离线语音识别,由于其在没有网络连接的情况下仍然能提供稳定、准确的语音处理能力,广…...