当前位置: 首页 > news >正文

【使用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&#xff0c;并制定必须的属性 id定义初始化方法定义node节点数据将获取到的数据渲染进页面 安装antv g6 npm install antv/g6 --save import G6 from antv/g6;创建一个 div&#xff0c;并制定必须的属性 id 定义好展示id&…...

【数学 函数空间】拉普拉斯变换解微分方程步骤

拉普拉斯变换解微分方程 拉普拉斯变换解微分方程的一般步骤如下&#xff1a; 写出微分方程。对微分方程两边应用拉普拉斯正变换。求解变换后的代数方程&#xff0c;得到 Y ( s ) Y(s) Y(s)。如果需要&#xff0c;进行部分分式分解。对 Y ( s ) Y(s) Y(s)进行拉普拉斯逆变换&…...

vue3: toRef, reactive, toRefs, toRaw

vue3&#xff1a; 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、给饮水机设定称呼&#xff0c;喊出称呼&#xff0c;饮水机回答&#xff1a;我在 2、语音进行加热功能&#xff0c;说&#xff1a;请加热&#xff0c;加热片运行 3、饮水机水位检测&#xff0c;低于阈值播报“水量少&#xff0c;请换水” 4、检测饮水机水温&#xf…...

c++的几种构造函数

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

FRP 实现内网穿透

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

数据结构笔记(其八)--一般树的存储及其遍历

1.知识总览 一般的树会有多个孩子&#xff0c;所以存储结构也会与二叉树略有不同。 一般树的遍历。 2.双亲表示法 双亲表示法&#xff0c;也是父亲表示法&#xff0c;即每个节点中都存储了其父节点的地址信息。 特性&#xff1a;可以轻易地找到父节点&#xff0c;但寻找孩子节…...

在spring boot工程中使用Filter时,@WebFilter 注解不生效的问题分析和解决方案

1. 问题描述 首先编写一个Filter类并通过Component放入spring容器中&#xff0c;通过实现jakarta.servlet中提供的Filter接口完成过滤器的创建&#xff0c;代码如下。 import jakarta.servlet.*; import jakarta.servlet.annotation.WebFilter; import org.springframework.st…...

浅谈“通感一体”

文章目录 5G_Advanced的关键技术通感一体的介绍通感一体应用通感一体面临的挑战 5G_Advanced的关键技术 2024年6月18日16点30分&#xff0c;在上海举行的3GPP RAN第104次会议上&#xff0c;R18标准正式冻结&#xff0c;标志着5G技术的又一重要里程碑。值得注意的是&#xff0c…...

【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 自带的定时任务机制。解释如下&#xff1a; …...

node.js知识点总结

1、Node.js Node. js是一个基于 Chrome v8引擎的服务器端 JavaScript运行环境&#xff1b;Node. js是一个事件驱动、非阻塞式I/O的模型&#xff0c;轻量而又高效&#xff1b;Node. js的包管理器npm是全球最大的开源库生态系统。 2、数据处理中的buffer&#xff1a; 具体…...

Kotlin中泛型的协变

interface Shapeclass Circle : Shapefun main() {val shapes1: List<Shape> listOf<Circle>()val shapes2: MutableList<Shape> mutableListOf<Circle>() }如上代码&#xff0c;第一行赋值语句是OK的&#xff0c;第二行赋值语句在编辑器上直接就报错…...

第三百二十五节 Java线程教程 - Java Fork/Join框架

Java线程教程 - Java Fork/Join框架 fork/join框架通过利用机器上的多个处理器或多个内核来解决问题。 该框架有助于解决涉及并行性的问题。 fork/join框架创建一个线程池来执行子任务。 当线程在子任务上等待完成时&#xff0c;框架使用该线程来执行其他线程的其他未决子任…...

网络游戏安全现状及相关应对方案

中国网络游戏历经十余年的飞速发展&#xff0c;取得了显著成就&#xff0c;但与此同时&#xff0c;也陷入了诸多安全问题的泥沼。 一、中国网络游戏发展中的安全困境 &#xff08;一&#xff09;灰色产业链滋生 外挂、私服、盗号、打金工作室以及网络信息诈骗等灰色产业链在…...

uniapp h5地址前端重定向跳转

简单说下功能&#xff0c;就是在地址输入http://localhost:8080/home 会自行跳转到http://localhost:8080/pages/home/index&#xff0c;如果有带参数的话也会携带上去。 ps&#xff1a;只能在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的运行日志&#xff0c;这次使用--log-file&#xff0c;因为它可以配置日志的级别、格式和每行日志的生成时间。 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&#xff0c;可以按照以下步骤操作&#xff1a; 安装NuGet包&#xff1a; 安装MiniProfiler.AspNetCore.Mvc包以集成MiniProfiler。安装MiniProfiler.EntityFrameworkCore包以监…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

AxureRP-Pro-Beta-Setup_114413.exe (6.0.0.2887)

Name&#xff1a;3ddown Serial&#xff1a;FiCGEezgdGoYILo8U/2MFyCWj0jZoJc/sziRRj2/ENvtEq7w1RH97k5MWctqVHA 注册用户名&#xff1a;Axure 序列号&#xff1a;8t3Yk/zu4cX601/seX6wBZgYRVj/lkC2PICCdO4sFKCCLx8mcCnccoylVb40lP...

电脑桌面太单调,用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...