AntV G6节点长度的修改

2024-02-01 08:10
文章标签 修改 节点 长度 antv g6

本文主要是介绍AntV G6节点长度的修改,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如下图所示,当我将节点修改成图片后,由于节点之间的连线太短,导致节点都挨的很近,看起来很丑。

 最后在文档中找到了linkDistance属性,可以设置指定边的距离

主要代码:

layout: {type: 'force',linkDistance: 150 // 指定边距离为150
},

效果如下:

完整代码:

<template><div><div id="container"></div></div>
</template>
<script>
import G6 from '@antv/g6'
export default {name: 'g6',mounted () {this.initComponent()},data () {return {data: {}, // 拓扑图数据graph: undefined // new G6}},methods: {/*** 创建G6,并对G6的一些设置* */initComponent () {this.data = {nodes: [{id: 'node1',label: '采集服务器',ip: '192.168.1.1',status: 0// 此处的key值一定不要出现type,如果出现type,图片修改无效},{id: 'node2',label: '数据库',ip: '192.168.1.2',status: 1},{id: 'node3',label: '终端',ip: '192.168.1.3',status: 2},{id: 'node4',label: '引擎',ip: '192.168.1.4',status: 0}],edges: [{source: 'node1',target: 'node2'},{source: 'node1',target: 'node3'},{source: 'node1',target: 'node4'}]}/*** 遍历节点数据,给节点添加图片*/for (let i = 0, len = this.data.nodes.length; i < len; i++) {// eslint-disable-next-line eqeqeqif (this.data.nodes[i].status == 0) { // 'offlineAnomaly'this.data.nodes[i].img = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp05%2F19100122420C335-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1641970684&t=70b9b0b3a05f6ca5d56d6c4234fdd1fd'}// eslint-disable-next-line eqeqeqif (this.data.nodes[i].status == 1) { // 'onlineAuth'this.data.nodes[i].img = 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000'}// eslint-disable-next-line eqeqeqif (this.data.nodes[i].status == 2) { // 'onlineAuth'this.data.nodes[i].img = 'https://img0.baidu.com/it/u=3927459320,2138990686&fm=26&fmt=auto'}}this.graph = new G6.Graph({container: 'container',width: 800,height: 800,layout: {type: 'force',linkDistance: 150 // 指定边距离为150},modes: {default: ['drag-canvas', 'zoom-canvas', 'drag-node'] // 允许拖拽画布、放缩画布、拖拽节点},defaultNode: { // 节点样式修改type: 'image', // 设置节点为图片size: [40, 40] // 节点大小}})this.graph.data(this.data)this.graph.render()}}
}
</script>

文档地址

这篇关于AntV G6节点长度的修改的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/666628

相关文章

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Linux修改pip和conda缓存路径的几种方法

《Linux修改pip和conda缓存路径的几种方法》在Python生态中,pip和conda是两种常见的软件包管理工具,它们在安装、更新和卸载软件包时都会使用缓存来提高效率,适当地修改它们的缓存路径... 目录一、pip 和 conda 的缓存机制1. pip 的缓存机制默认缓存路径2. conda 的缓

Linux修改pip临时目录方法的详解

《Linux修改pip临时目录方法的详解》在Linux系统中,pip在安装Python包时会使用临时目录(TMPDIR),但默认的临时目录可能会受到存储空间不足或权限问题的影响,所以本文将详细介绍如何... 目录引言一、为什么要修改 pip 的临时目录?1. 解决存储空间不足的问题2. 解决权限问题3. 提

Linux文件名修改方法大全

《Linux文件名修改方法大全》在Linux系统中,文件名修改是一个常见且重要的操作,文件名修改可以更好地管理文件和文件夹,使其更具可读性和有序性,本文将介绍三种在Linux系统下常用的文件名修改方法... 目录一、引言二、使用mv命令修改文件名三、使用rename命令修改文件名四、mv命令和rename命

mybatis-plus 实现查询表名动态修改的示例代码

《mybatis-plus实现查询表名动态修改的示例代码》通过MyBatis-Plus实现表名的动态替换,根据配置或入参选择不同的表,本文主要介绍了mybatis-plus实现查询表名动态修改的示... 目录实现数据库初始化依赖包配置读取类设置 myBATis-plus 插件测试通过 mybatis-plu

Linux下修改hostname的三种实现方式

《Linux下修改hostname的三种实现方式》:本文主要介绍Linux下修改hostname的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下修改ho编程stname三种方式方法1:修改配置文件方法2:hFvEWEostnamectl命

Git如何修改已提交人的用户名和邮箱

《Git如何修改已提交人的用户名和邮箱》文章介绍了如何修改Git已提交人的用户名和邮箱,包括注意事项和具体步骤,确保操作正确无误... 目录git修改已提交人的用户名和邮箱前言第一步第二步总结git修改已提交人的用户名和邮箱前言需注意以下两点内容:需要在顶层目录下(php就是 .git 文件夹所在的目

修改若依框架Token的过期时间问题

《修改若依框架Token的过期时间问题》本文介绍了如何修改若依框架中Token的过期时间,通过修改`application.yml`文件中的配置来实现,默认单位为分钟,希望此经验对大家有所帮助,也欢迎... 目录修改若依框架Token的过期时间修改Token的过期时间关闭Token的过期时js间总结修改若依

MySQL修改密码的四种实现方式

《MySQL修改密码的四种实现方式》文章主要介绍了如何使用命令行工具修改MySQL密码,包括使用`setpassword`命令和`mysqladmin`命令,此外,还详细描述了忘记密码时的处理方法,包... 目录mysql修改密码四种方式一、set password命令二、使用mysqladmin三、修改u

使用Python在Excel中插入、修改、提取和删除超链接

《使用Python在Excel中插入、修改、提取和删除超链接》超链接是Excel中的常用功能,通过点击超链接可以快速跳转到外部网站、本地文件或工作表中的特定单元格,有效提升数据访问的效率和用户体验,这... 目录引言使用工具python在Excel中插入超链接Python修改Excel中的超链接Python