基于antv x6实现的组织架构图

X6 是基于 HTML 和 SVG 的图编辑引擎,基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑。

一、业务背景

将组织树形结构图形化,更直观的展示个人所在的组织架构。

二、功能点

  1. 组织结构按需渲染,支持层级展开、收缩
  2. 按需求自定义树节点视觉效果
  3. 导出PNG
  4. 小地图

三、技术点

  • 数据转化:源数据 -> nodes和edges
  • 自动计算布局
  • 节点自定义
  • 展开、收缩

四、遇到问题

节点自定义有两种方式,一种是使用@antv/x6-react-shape插件,通过定义React组件实现节点自定义,另一种是通过svg代码片段来自定义节点,api类似d3的用法。

第一种方式,在导出PNG的功能中遇到样式和组件中img没有显示的问题,暂时没有找到原因:

所以本文采用了第二种方式进行自定义节点。

五、Demo

六、代码地址

组织架构图代码地址

七、ToDo

  • 展开/收缩树状态保留
  • 动画
  • 设置默认展开层级
  • ......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/40752.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS8换源

一、备份 切换至源目录,备份源: cd /etc/yum.repos.d/ #进入源目录 ls #查看源文件 mkdir bkup #创建备份目录 mv CentOS-Linux-* bkup #将源文件移动至备份文件夹若是更换源并且原生源已经备份的情况下,使用rm -f *.repo删除原先文件…

【软件测试】之黑盒测试用例的设计

🏀🏀🏀来都来了,不妨点个关注! 🎧🎧🎧博客主页:欢迎各位大佬! 文章目录 1.测试用例的概念2.测试用例的好处3. 黑盒测试用例的设计3.1 黑盒测试的概念3.2 基于需求进行测…

Python面向对象 -- 多态

本套课在线学习视频(网盘地址,保存到网盘即可免费观看): ​​https://pan.quark.cn/s/2040f00d3205​​ 在Python中,变量的访问控制可以通过不同的命名约定实现,包括系统变量、保护变量和私有变量。这些命…

AI绘画Stable Diffusion画全身图总是人脸扭曲?ADetailer插件实现一键解决!

大家好,我是向阳 你是否遇到过SD生成的人物脸部扭曲、甚至令人恶心的情况?也曾感到束手无策?别担心,这份教程专为你而来。 在使用SD生成人物全身照时,你可能经常发现人物的脸部会出现扭曲问题。这是因为人物面部像素…

d88888888

分析:v9999999999 vn输出n个n 先算出n的位数p 所以答案是nn*10的p次方n*10的2p次方.....n*10的(n-1)p次方 化简n*(10的0次方10的p次方10的2p次方.....10的(n-1)p次方) 后面为等比数列求和 …

【前端】IntersectionObserver 实现图片懒加载和无限滚动

【前端】IntersectionObserver 实现图片懒加载和无限滚动 在前端开发中,性能优化是一个重要的考量因素。随着现代网页和应用的复杂性增加,确保页面快速加载和流畅运行变得越来越重要。本文将介绍一种强大的工具——IntersectionObserver API&#xff0c…

golang 自旋

自旋 自旋锁的定义:当一个线程尝试去获取某一把锁的时候,如果这个锁此时已经被别人获取(占用),那么此线程就无法获取到这把锁,该线程将会等待,间隔一段时间后会再次尝试获取。这种采用循环加锁 -> 等待的机制被称为…

力扣2488.统计中位数为 K 的子数组

力扣2488.统计中位数为 K 的子数组 等价转换 子数组为奇数 : 左小 右小 左大 右大 左小 – 左大 右大 – 右小 子数组为偶数 : 左小 右小 左大 右大 – 1 左小 – 左大 右大 – 右小 - 1提示中说明k为两数中左边那个 先从k的下标pos开始往左逆序…

LabVIEW新能源汽车电池性能测试系统

新能源汽车的核心部件之一是电池,其性能直接关系到整车的续航里程、安全性和寿命。为了确保电池的性能和可靠性,测试是必不可少的环节。本文介绍了一种基于LabVIEW的新能源汽车电池性能测试系统,通过LabVIEW与数据采集设备的无缝集成&#xf…

Unity 实现UGUI 简单拖拽吸附

获取鼠标当前点击的UI if(RectTransformUtility.RectangleContainsScreenPoint(rectTransform, Input.mousePosition)) {return rectTransform.gameObject; } 拖拽 在Update 中根据鼠标位置实时更新拖拽的图片位置。 itemDrag.transform.position Input.mousePosition; …

秒拿AI模型API Key!Chat2DB AI模型切换实用秘籍

智谱AI(ZhiPu AI) 智谱 AI 是由清华大学计算机系技术成果转化而来的公司,致力于打造新一代认知智能通用模型。 1.申请调用权限 智谱AI开放平台网址:https://open.bigmodel.cn/ 点击开始使用,进行登录/注册。 智谱A…

The Sandbox 创作者的幕后采访: 了解创作者的内心世界

我们采访了一些在 "创作者挑战" 中脱颖而出的顶尖创作者,探讨他们成功的秘诀以及在创造玩家喜爱的体验方面的心得。 The Sandbox 创作者挑战涌现出许多才华横溢的创作者,他们在游戏制作机制上的创新和突破引起了 The Sandbox 社区的广泛关注。…

大白菜U盘启动工具

大白菜如何u盘启动进winpe装系统大白菜是一款非常实用的U盘启动盘制作工具,可以帮助用户快速地将U盘制作成启动盘,从而方便地进行系统安装、维护和修复等操作。官方网站: 大白菜u盘启动盘制作工具_大白菜u盘装系统_大白菜pe_大白菜官网-首页…

为什么缠中说禅要选择08年“假死”跑路?

在缠中说禅的信徒圈内,流传着创始人李彪于2008年逝世的说法,这一事件常被描绘成一种悲壮的牺牲,仿佛是为了其理念与信徒们的福祉鞠躬尽瘁。然而,这一“逝世”既未经公开证实,也与李彪生前构建的高大名声形成了某种讽刺…

Spring AI 1.0.0 新变化,从 0.8.1 如何升级

Spring AI 1.0.0-M1 版本已经发布,距离 1.0.0 正式版又更近了一步。同时这也意味着,Spring AI 1.0.0 的 API 已经基本确定,不会发生大的改动。这里介绍一下,相对于上一个发布版本 0.8.1,Spring AI 1.0.0 的一些重要的变…

轻松跨越国界:使用WildCard畅享全球AI服务

大家好,现在AI技术已经深入到我们的日常生活中。然而,许多朋友仍然难以获取优质的AI工具和应用。那么,如何才能使用像ChatGPT这样的AI服务呢? 今天我为大家介绍一个“一劳永逸”的解决方案,它就是我们的主角——WildC…

HDU 1506 Largest Rectangle in a Histogram (DP或单调栈+笛卡尔树)

传送门 题目大意: 有N条的长条状的矩形,宽度都为1,第i条高度为Hi,相邻的竖立在x轴上,求最大的子矩形面积 DP思路及代码 求出当前点能够到达的最左边和最右边的位置,答案就是(最右边-最左边&…

阿里云 ECS 服务器的安全组设置

阿里云 ECS 服务器的安全组设置 缘由安全组多个安全组各司其职一些常见的IP段百度 IP 段华为云 IP 段搜狗蜘蛛 IP 段阿里云 IP 段 。。。 缘由 最近公司规模缩减,原有的托管在 IDC 机房的服务器,都被处理掉了,所有代码都迁移到了阿里云的云服…

大模型学习笔记2【大模型】

文章目录 学习内容1.选择基座模型2.验证3.微调4.训练数据5.Instruction Tuning6.训练7.测试8.部署 学习内容 介绍流程 1.选择基座模型 基座模型对结果比较重要,一般选择的流程:首先关注整体性能(打榜),其次关注所需…

腾讯云函数部署环境[使用函数URL]

使用函数URL 之前使用的是网关API,最近腾讯云的网关API说要关闭了,所以没有办法这里改成函数URL,使用后发现只要不是在浏览器直接访问的情况,函数URL都可以满足! 这里结合腾讯云函数node.js返回自动带反斜杠这篇文章来做说明,比如这里的URL如下: 结合文章腾讯云函数node.js返…