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

antv x6使用（支持节点排序、新增节点、编辑节点、删除节点、选中节点）

news 来源：原创 2025/9/17 3:04:41

项目需要实现如下效果流程图，功能包括节点排序、新增节点、编辑节点、删除节点、选中节点等

html部分如下：

<template><div class="MindMapContent"><el-button size="small" @click="addNode">新增节点</el-button><el-button size="small" @click="updateNode">编辑节点</el-button><el-button size="small" type="danger" plain @click="removeNode">删除节点</el-button><div id="mindContent" style="height: 300px"><div id="container"></div></div><el-dialog v-model="visible" :title="pageType == 'edit' ? '编辑' : '新增'"><div><el-form class="search-form" ref="formData" size="small" label-width="120px" :model="formData"><el-form-item label="节点名称" prop="label" :rules="[{required: true, message: '请输入节点名称',trigger: 'blur'}]"><el-input v-model="formData.label" style="width: 60%"></el-input></el-form-item></el-form></div><span slot="footer" class="dialog-footer"><el-button @click="cancelDialog">返回</el-button><el-button type="primary" @click="submitData">提交</el-button></span></el-dialog></div>
</template>

需要后后端返回的数据格式如下：

mindData: {edgeList: [{source: '50',target: '54'},{source: '50',target: '61'},{source: '54',target: '66'},{source: '61',target: '67'},{source: '67',target: '69'},{source: '50',target: '71'},],nodeList: [{id: '50', label: '根节点'},{id: '54', label: '111'},{id: '61', label: '222'},{id: '66', label: '333'},{id: '67', label: '444'},{id: '69', label: '555'},{id: '71', label: '666'},]
}

获取后端返回数据后，需要为节点和边设置样式，所以需要对数据进行处理。x6图最好只加载一次，后续再进行操作时只需要更新数据即可。因为在项目中可以为某个节点绑定其它属性id，绑定后仍保持选中状态，所以设置selectNodeId，当有selectNodeId时，需要选中node.id为selectNodeId的节点

    //获取节点数据getNodeData(bool,selectNodeId){this.objData.nodes = (this.mindData.nodeList || []).map(item => {return {id: item.id, // String，可选，节点的唯一标识width: 120,   // Number，可选，节点大小的 width 值height: 30,  // Number，可选，节点大小的 height 值label: item.label, // String，节点标签data: {portalId: item.portalId || '',},attrs: {body: {stroke: 'rgba(238, 238, 238, 1)',strokeWidth: 1,rx: 5,ry: 5,style: {filter: 'drop-shadow(0px 0px 8px rgba(0,0,0,0.07))'}},label: {fontSize: 12,textWrap: {ellipsis: true,width: 105}}}}})this.objData.edges = (this.mindData.edgeList || []).map(item => {return{source: item.source, // String，必须，起始节点 idtarget: item.target, // String，必须，目标节点 idrouter: {name: 'manhattan',args: {startDirections: ['right'],endDirections: ['left']}},attrs: {line: {stroke: '#1d6ee4'}}}})//初始化加载mind，更新数据时不初始化mindif(bool){this.initGraph()}else {this.graph.cleanSelection()this.nowData = {}//更新节点信息后重新布局 let gridLayout = new DagreLayout({type: 'dagre',rankdir: 'LR',align: undefined,ranksep: 45,nodesep: 5,})this.graph.fromJSON(gridLayout.layout(this.objData))//如果有selectNodeId，则选中node.id为selectNodeId的节点if (selectNodeId) {const node = this.graph.getCellById(selectNodeId)if (node) {this.graph.resetSelection(node)this.nowData = {id: node.id,label: node.label,portalId: node.data.portalId || ''}//返回选中的数据  this.$emit('getData', this.nowData)}}}},

初始化画布

// 初始化流程图画布initGraph() {let container = document.getElementById('container')this.graph = nullthis.graph = new Graph({container,width: '100%',height: '100%',//最大最小缩放比例scaling: {min: 0.7,max: 1.2},autoResize: true,panning: true,mousewheel: true,background: {color: '#ffffff', // 设置画布背景颜色},})//使用布局插件自动布局  let gridLayout = new DagreLayout({type: 'dagre',rankdir: 'LR',align: undefined,ranksep: 45,nodesep: 5,})//渲染布局数据this.graph.fromJSON(gridLayout.layout(this.objData))//使用x6选中插件this.graph.use(new Selection({enabled: true,multiple: false,movable: false,rubberband: false,showNodeSelectionBox: true,clearSelectionOnBlank: false}))//节点点击选中  this.graph.on('node:click', ({ e,node }) => {e.stopPropagation()tooltip.style.display = 'none'this.graph.resetSelection(node)this.nowData = {id: node.id,label: node.label,portalId: node.data.portalId || ''}this.$emit('getData',this.nowData)})//点击节点外清空点击数据  this.graph.on('blank:click', ({ e,node }) => {this.graph.cleanSelection()this.nowData = {}})//node节点有宽度限制，label超过宽度时显示...，但是需要tooltip显示完整的label const tooltip = document.createElement('div')tooltip.className = 'x6-tooltip'tooltip.style.position = "absolute"tooltip.style.display = 'none'tooltip.style.padding = '6px'tooltip.style.borderRadius = '5px'tooltip.style.backgroundColor = '#303133'tooltip.style.color = '#ffffff'tooltip.style.fontSize = '12px'let mindContent = document.getElementById('mindContent')mindContent.appendChild(tooltip)this.graph.on('node:mouseenter', ({ node }) => {if(node.label){const position = this.graph.localToGraph(node.getBBox().getCenter())tooltip.style.display = 'block'tooltip.style.left = `${position.x - 60}px`tooltip.style.top = `${position.y - 50}px`tooltip.textContent = node.label}})this.graph.on('node:mouseleave', ({ node }) => {tooltip.style.display = 'none'})},

节点操作

    //删除节点removeNode(){if(!this.nowData.id){this.$message.error('请选择需要删除的节点')}else{this.mindData.nodeList = this.mindData.nodeList.filter(item => item.id != this.nowData.id)this.mindData.edgeList = this.mindData.edgeList.filter(item => item.target != this.nowData.id)this.getNodeData(false)}},//新增节点addNode(){this.formData = {}this.pageType = 'add'if (this.objData.nodes.length == 0){this.visible = true} else{if(!this.nowData.id){this.$message.error('请选择父节点')}else{this.visible = true}}},//编辑节点updateNode(){this.formData = {}this.pageType = 'edit'if(!this.nowData.id){this.$message.error('请选择编辑的节点')}else{this.formData = this.nowDatathis.visible = true}},

新增节点和编辑节点弹窗操作

    //cancelDialogcancelDialog(){this.visible = false},submitData(){// 新增的时候，formData就是新增本身，nowData就是父节点// 编辑的时候，获取到nowData，赋值给formDatathis.$refs.formData.validate(valid => {if(valid){if (this.pageType == 'edit'){let obj = this.mindData.nodeList.find(item => item.id == this.formData.id)obj.label = this.formData.labelthis.visible = falsethis.getNodeData(false)}else{let id = Math.random().toString(36).substring(2, 4)this.mindData.nodeList.push({id, label: this.formData.label,})this.mindData.edgeList.push({target: id, source: this.nowData.id,})this.visible = falsethis.getNodeData(false)}}})},

涉及的样式

<style scoped>
.MindMapContent{padding: 10px 25px;height: 350px;background-color: #ffffff;
}
#mindContent{position: relative;
}
</style>

项目地址

antv x6使用（支持节点排序、新增节点、编辑节点、删除节点、选中节点）

项目需要实现如下效果流程图，功能包括节点排序、新增节点、编辑节点、删除节点、选中节点等 html部分如下： <template><div class"MindMapContent"><el-button size"small" click"addNode">新增节点&…...

编程日记 2025/9/17 3:04:41

Nginx 是什么？Nginx高并发架构拆解指南

你是一个程序员，你在电脑上编辑了一段文本，将它保存为 txt 文件。将它拖到浏览器打开，就能看到文件里的内容。但这看起来太过单调，为了让画面更丰富，我们定个规则，在文本边上加个两个h1符号，文…...

编程日记 2025/9/12 12:48:04

可道云支持群晖的docker安装了:全网唯一支持onlyoffice安装说明

在群晖系统上部署可道云面临显著的技术门槛。DSM7.2版本因不兼容Apache2.2等组件，用户需改用Docker手动配置环境，涉及PHP扩展、SQLite3适配及存储路径映射等复杂操作，且安装后需通过WebStation调整脚本语言参数，对非专业用户极不友…...

编程日记 2025/9/11 10:05:26

V4L2杂谈

V4L2的开发手册在做v4l2的开发的时候， 可以使用v4l2-ctl命令协助调试和软件开发。关于linux多媒体开发可以参考链接：https://www.linuxtv.org/wiki/index.php/Main_Page关于v4l2的api接口开发可以参考：https://linuxtv.org/docs.php在linux…...

编程日记 2025/9/14 3:19:07

Java—HTML:3D形变

今天我要介绍的是在Java HTML中CSS的相关知识点内容之一：3D形变（3D变换）。该内容包含透视（属性：perspective），3D变换，3D变换函数以及案例演示， 接下来我将逐一介绍&…...

编程日记 2025/9/16 3:22:54

Zotero PDF Translate 翻译插件使用OpenAI API配置教程

PDF Translate：提升 Zotero 内置 PDF 阅读器的翻译功能 “PDF Translate” 是一款为 Zotero 设计的插件，旨在方便用户在 Zotero 内置的 PDF 阅读器中进行划词或段落翻译，辅助阅读外文文献。一、安装插件下载插件： 访问 PDF T…...

编程日记 2025/9/11 11:31:07

[raspberrypi 0w and respeaker 2mic]实时音频波形

0. 环境 ubuntu22主机， 192.168.8.162， raspberry 0w， 192.168.8.220 路由器 1. 树莓派 # rpi - send.py # 或者命令行：arecord -D plughw:1,0 -t wav -f cd -r 16000 -c 2 | nc 192.168.8.162 12345import socket imp…...

编程日记 2025/9/11 7:08:47

go-zero自动生成repository文件和测试用例

文章目录 repository的作用自动生成repository文件repo模板文件repo_test模板文件生成结果运行测试用例 repository的作用在软件开发中，尤其是在采用分层架构或者领域驱动设计（DDD）的项目里，repository（仓库&#xf…...

编程日记 2025/9/16 20:28:46

红宝书第三十六讲：持续集成（CI）配置入门指南

红宝书第三十六讲：持续集成（CI）配置入门指南资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、什么是持续集成？ 持续集成（CI）就像咖啡厅的…...

编程日记 2025/9/16 8:29:00

【Java学习】如何利用AI学习Java语言开发（二）

利用AI辅助学习Java语言开发可以显著提高学习效率、解决实际问题和优化代码质量。以下是结合AI工具和方法的系统化学习路径：一、AI辅助学习基础阶段智能交互式学习平台使用Codecademy（AI驱动版）或JetBrains Academy的Java课程，AI会根据你的代码实时提供修正建议尝试Ch…...

编程日记 2025/9/10 19:34:41

【C++算法】53.链表_重排链表

文章目录题目链接：题目描述：解法C 算法代码： 题目链接： 143. 重排链表题目描述： 解法模拟找到链表的中间节点快慢双指针把后面的部分逆序双指针，三指针，头插法合并两个链表合并两个有…...

编程日记 2025/9/4 7:11:17

Ubuntu安装Docker引擎

安装Docker引擎一、注意事项防火墙兼容性若使用 ufw 或 firewalld，Docker 容器端口会绕过防火墙规则。建议通过 iptables 或 ip6tables 配置防火墙，并将规则添加到 DOCKER-USER 链。仅支持 iptables-nft 和 iptables-legacy&#xff0…...

编程日记 2025/9/9 4:11:46

[目标检测]2023ICCV：DiffusionDet: Diffusion Model for Object Detection

作者：Shoufa Chen, Peize Sun, Yibing Song, Ping Luo 论文：https://arxiv.org/pdf/2211.09788v2 代码：https://github.com/ShoufaChen/DiffusionDet 摘要我们提出了一个新的框架DiffusionDet， 将目标检测构建为从噪声框到目标…...

编程日记 2025/9/10 15:50:39

CExercise_09_结构体和枚举_2VS的Debug模式查看它的内存布局,采用结构体数组的方式存储信息,调用函数打印结构体数组.

题目： 下面结构体类型的变量的内存布局是怎样的？请使用VS的Debug模式查看它的内存布局 typedef struct stundent_s {int number;char name[25];char gender;int chinese;int math;int english; } Student;// 结构体对象的声明和初始化 Student s1 { 1, …...

编程日记 2025/9/11 12:22:51

LeetCode 热题 100_零钱兑换（85_322_中等_C++）（动态规划）

LeetCode 热题 100_零钱兑换（85_322） 题目描述：输入输出样例：题解：解题思路：思路一（动态规划）： 代码实现代码实现（思路一（动态规划）&a…...

编程日记 2025/9/8 1:30:09

Java——抽象方法抽象类接口详解及综合案例

1.抽象方法抽象类介绍抽象方法: 将共性的行为(方法)抽取到父类之后， 由于每一个子类执行的内容是不一样， 所以，在父类中不能确定具体的方法体。该方法就可以定义为抽象方法。抽象类: 如果一个类中存在抽象方法，那么该类就必须…...

编程日记 2025/9/16 0:52:18

国产芯片解析：LDR6501 Type-C接口OTG充电PD芯片详解

LDR6501 是一款专为 USB Type-C 设备设计的单C口DPR接口PD通信芯片，封装形式为 SOT23-6。此款芯片具有多项实用功能，在耳机转接器、领夹麦克风以及 OTG 转接头等应用中表现出色。应用领域 ‌耳机转接器‌：许多新型耳机采用 Type-C 接口&am…...

编程日记 2025/9/11 1:15:15

Payoneer(P卡）会关联吗？如何有效防止P卡关联？

随着跨境电商和全球支付需求的增加，Payoneer（简称P卡）成为了许多商家和个人进行国际支付和收款的重要工具。Payoneer是一种全球支付平台，支持用户跨国收款、汇款，并提供多种货币的账户支持。许多从事跨境电商的商家和…...

编程日记 2025/9/12 19:32:22

前端基础之《Vue（3）—计算属性》

一、computed选项 1、计算属性语法：在computed选项中，定义计算属性方法，在方法体使用声明式变量进行若干计算。 2、计算属性一定是个函数。一定有返回值。 3、计算属性的作用 （1）用于优化指令的表达式，…...

编程日记 2025/9/12 16:57:12

【Linux】Linux 权限：数字背后的神秘 “门禁卡” 系统

目录权限的基本概念Linux上用户的分类超级用户和普通用户用户之间的切换文件访问者的分类文件属性与访问权限Linux下的文件类型文件后缀在Linux中的作用文件自身的属性【⭐】文件访问者的三种权限【rwx】文件权限值的表示方法文件访问权限的相关设置方法chmod——设置文件的…...

编程日记 2025/9/16 6:32:31

Java中List方法的使用详解

目录一、List接口概述二、List常用方法（一）创建List对象（二）添加元素（三）删除元素（四）查找元素（五）遍历列表（六）列表的大小&#xff…...

编程日记 2025/9/14 13:23:31

Can We Edit Multimodal Large Language Models? ➡️ 论文标题：Can We Edit Multimodal Large Language Models? ➡️ 论文作者：Siyuan Cheng, Bozhong Tian, Qingbin Liu, Xi Chen, Yongheng Wang, Huajun Chen, Ningyu Zhang ➡️ 研究机构: 浙江大…...

编程日记 2025/9/6 10:11:46

JS—防抖和节流：1分钟掌握防抖和节流

个人博客：haichenyi.com。感谢关注一. 目录一–目录二–防抖三–节流四–进阶应用五–总结二. 防抖（Debounce） 防抖（Debebounce）和节流（Throttle）都是前端开发中用于优化高频事件性能的两…...

编程日记 2025/9/9 13:42:09

MCP基础学习二：MCP服务搭建与配置

文章目录 MCP服务搭建与配置一，学习目标：二，学习内容：1. 如何搭建MCP服务端服务端初始化与配置MCP服务架构与数据流交互图核心实现注册服务功能服务器启动与API暴露 2. 本地应用与MCP服务的集成客户端SDK实现客户端应用实现功能演…...

编程日记 2025/9/12 17:27:24

MyBatis 操作数据库

目录什么是MyBatis? 注释 Mapper注释的介绍和使用 Select注释的介绍和使用 SpringBootTest注释的介绍和使用 Test注释的介绍的使用 MyBatis入门 1）准备工作 <1>创建工程 <2>数据准备 2）配置数据库连接字符串 3&#xff…...

编程日记 2025/9/6 21:37:03

蓉光：科技与自然的千年交响

故事背景故事发生在中国四川成都，这座千年古城在近未来完成蜕变，青城山的云雾与锦江的碧波间，智能建筑如雨后春笋般生长。全城建筑采用太阳能皮肤，街道流淌着数字化的都江堰水系，杜甫草堂的飞檐与机械芙蓉树共舞&…...

编程日记 2025/9/8 9:18:58

[C语言]gets和fgets函数区别及详解

一、gets 每当讨论 gets 函数时，大家不由自主地就会想起 1988 年的“互联网蠕虫”，它在 UNIX 操作系统的 finger 后台程序中使用一个 gets 调用作为它的攻击方式之一。很显然，对蠕虫病毒的实现来说， gets 函数的功劳不可小视。不…...

编程日记 2025/9/10 0:15:28

【场景应用3】audio_classification：音频分类的微调

1 引言本笔记展示了如何对多语种预训练的语音模型进行微调，以实现自动语音识别（Automatic Speech Recognition）。本笔记旨在使用SUPERB数据集中的关键词检测子集，并且可以使用任何来自模型库（Model Hub）的语音模型检查点，只要该模型有一个包含序列分类头（Sequence …...

编程日记 2025/9/14 10:09:28

【前端】【难点】前端富文本开发的核心难点总结与思路优化

前端富文本开发的核心难点总结富文本编辑器在前端开发中广泛应用于内容管理系统、文章发布、评论区等场景。其开发与集成存在较多复杂性，涵盖内容结构管理、交互体验、跨平台兼容性等方面，以下逐项分析。二、富文本开发的具体难点分析 （一…...

编程日记 2025/9/4 3:10:27

如何优雅使用 ReentrantLock 进行加解锁：避免常见坑点，提高代码可维护性

引言：锁的基本概念和问题在多线程编程中，为了确保多个线程在访问共享资源时不会发生冲突，我们通常需要使用锁来同步对资源的访问。Java 提供了不同的锁机制，其中 ReentrantLock 是一种最常用且功能强大的锁，它属于…...

编程日记 2025/9/12 13:25:28

帕金森患者行动迟缓，日常生活怎么破局？

帕金森病，是一种常见于中老年人的神经退行性疾病，正悄然改变着无数患者的生活轨迹。它初期症状隐匿，常以手抖为信号，起初可能只是在安静状态下，手部出现轻微且有节律的震颤，随着时间推移，震颤逐…...

编程日记 2025/9/16 4:06:20

7-openwrt-one通过web页面配置访客网络、无线中继等功能

前几个章节一直在介绍编译、分区之类的，都还没正常开始使用这个路由器的wifi。默认wifi是没有启动的，前面还是通过手动修改uci配置启动的，这个章节介绍下官方web页面的使用。特别是访客网络、无线中继 1、开启wifi，配置wifi基本信息我们使用有线连接路由器，通过192.168.…...

编程日记 2025/9/8 1:30:11

塑造现代互联网的力量：Berkeley在网络领域的影响与贡献

引言 “Berkeley” 这个名字在计算机网络和互联网领域中具有举足轻重的地位，许多关键的技术、协议和工具都与其紧密相关。它与加利福尼亚大学伯克利分校（UC Berkeley） 密切相关，该校在计算机科学与网络研究中做出了许多开创性的…...

编程日记 2025/9/13 16:45:13

大数据学习（105）-Hbase

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

编程日记 2025/9/16 7:15:09

c# 系列pdf转图片各种处理3--net3.1到net8 PDFtoImage

最近一直在做pdf渲染图片的问题，nuget PDFtoImage 支持3.1到net8 ，直接上代码 private static void DownloadFileAsync(string url, string localPath){using (HttpClient client new HttpClient()){client.DefaultRequestHeaders.Add("User-Agen…...

编程日记 2025/9/8 21:42:45

宁德时代25年春招笔试演绎数字推理SHL测评题库

宁德时代校招测评包含演绎推理数字推理两部分，请单击以下链接进行测评，详细操作指引请参见如下指引，请在测试前了解，大约用时60分钟。正式测评有两个部分:数字推理18分钟演绎推理18分钟，数字推理共10题，演绎…...

编程日记 2025/9/12 4:19:45

C# 看门狗策略实现

using System; using System.Threading;public class Watchdog {private Timer _timer;private volatile bool _isTaskAlive;private readonly object _lock new object();private const int CheckInterval 5000; // 5秒检测一次private const int TimeoutThreshold 10000; …...

编程日记 2025/9/9 22:31:54

相关文章：