【使用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包以监…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
el-switch文字内置
el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径:src/utils/timer.ts 完整代码: import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
高防服务器能够抵御哪些网络攻击呢?
高防服务器作为一种有着高度防御能力的服务器,可以帮助网站应对分布式拒绝服务攻击,有效识别和清理一些恶意的网络流量,为用户提供安全且稳定的网络环境,那么,高防服务器一般都可以抵御哪些网络攻击呢?下面…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
