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

antv X6--实现节点旁添加多个text标签

前言:接本专栏上篇文章,实现一个新需求,如有不懂的可先去看新手教程

需求描述:如何在节点旁添加多个标签,如下图所示:

实现该需求目前我只想到两种方法:

方法一:使用换行符将不同的标签连接在一起。这种方式简单,但不够灵活。
方法二:通过在节点的 attrs 中添加自定义 SVG 创建多个文本标签。你可以根据需要调整这些标签的位置和样式。

先简单说一下方法一,就是在添加节点的label标签里直接使用换行符:

 这种方法太局限了,只能适应简单的需求,无法给标签加更多的设计

方法二:添加自定义 SVG 标签

1、配置添加节点方法里面的ports,之前我们只在节点上加了连接桩,现在再加三个组展示新的标签

代码位置如下图:

具体代码:

 ports: {groups: {group1: {position: [30, 30],},group2: {position: [0, 10],attrs: {circle: {r: 0, // 设定半径为0,隐藏圆圈},},},group3: {position: [0, 20],attrs: {circle: {r: 0, // 设定半径为0,隐藏圆圈},},},group4: {position: [0, 30],attrs: {circle: {r: 0, // 设定半径为0,隐藏圆圈},},},},items: [{group: "group1",id: "port1",attrs: {circle: {r: 6,magnet: true,stroke: "#ffffff",strokeWidth: 2,fill: "#5F95FF",},},},{id: "label1",group: "group2",attrs: {text: {text: "标签1",fill: "#333",fontSize: 12,},},},{id: "label2",group: "group3",attrs: {text: {text: "标签2",fill: "#333",fontSize: 12,},},},{id: "label3",group: "group4",attrs: {text: {text: "标签3",fill: "#333",fontSize: 12,},},},],},

 代码解释:

1、这里写了四个group,group1就是之前写的连接桩,其他三个就是我们要添加的标签所在的组,因为防止三个标签重叠,所以我分成了三个组去分别写了position

2、因为使用了端口(ports)来添加标签。默认情况下,端口会显示一个圆形标记,因此默认情况下你看到三个白色的圈。这里我给那三个group加了以下代码去隐藏了那三个圈。

              attrs: {circle: {r: 0, // 设定半径为0,隐藏圆圈},},

 

http://www.lryc.cn/news/427564.html

相关文章:

  • JAVA--多线程
  • ADB-DROM
  • mysql 之 explain
  • CentOS迁移案例 | 保障轨道交通安全、发挥基础设施效能,麒麟信安操作系统支撑某市轨道交通畅行无忧
  • 获取操作系统的信息(Go语言)
  • 【论文阅读】HuatuoGPT-II, One-stage Training for Medical Adaption of LLMs
  • Excel表列序号
  • IOS 03 纯代码封装自定义View控件
  • 比较结构加法及其逆运算
  • 44.【C语言】指针(重难点)(G)
  • 746. 使用最小花费爬楼梯-dp3
  • MPU6050详细介绍
  • 【分享】Excel的3个隐藏功能
  • Linux中的chown指令
  • UCOSIII内存管理机制详解
  • Android12 显示框架之Transaction----client端
  • 在Windows上使用FRP搭建内网穿透:
  • TypeError: Cannot read properties of undefined (reading ‘scrollIntoView‘)(已解决)
  • 【解决】Unity Inspector 视窗脚本中文乱码问题
  • 使用 C/C++访问 MySQL
  • Linux 网络套接字解析:实现网络通信
  • vue3 组合式API
  • 二、什么是Vue中的响应式?Vue的响应式原理
  • 快9月了才开始强化,跟张宇还是武忠祥?
  • SSM好易学学习平台---附源码92142
  • 对于mp4 ios和mac safari不能播放问题处理
  • 开发同城交友找搭子系统app前景分析
  • faiss向量数据库测试《三体》全集,这家国产AI加速卡,把性能提了7倍!
  • 负载均衡---相关概念介绍(一)
  • 计算机基础知识复习8.14