原生JavaScript绘制复杂鱼骨图详解
本文介绍如何使用纯JavaScript代码绘制复杂的、可定制的鱼骨图，无需借助第三方库如G6。我们将深入探讨代码实现，并指出代码中尚待完善的部分。
文章基于一个用户提供的复杂鱼骨图示例（见上图），该图包含多级子节点和节点文本信息，因此选择原生SVG绘制方式，直接在HTML中创建SVG元素构建鱼骨图，以获得更高的灵活性。
代码首先定义一个JSON数据结构arr，存储鱼骨图的节点和连接关系。每个节点包含label（标签）、value（值）、type（类型）、time（时间）和child（子节点）等属性。 核心部分是FishBone类，负责解析数据并使用SVG元素进行绘制。
立即学习“Java免费学习笔记（深入）”；
Otter.ai
一个自动的会议记录和笔记工具，会议内容生成和实时转录
91 查看详情
FishBone类包含以下关键方法：
initKvArray()：遍历数据，计算每个月份节点的宽度，并存储在kvArray中。宽度根据子节点中最长文本长度自适应调整。getMaxWidth()：递归计算每个节点及其子节点中最长文本宽度，确定节点宽度。randerMonthBox()：绘制月份节点（平行四边形）及其文本。月份节点的x坐标根据前一个节点宽度累加计算。creatBigCircle()：绘制主干节点（圆圈）和连接线，并递归调用renderParent()绘制子节点。renderParent()：递归绘制子节点，并计算子节点高度。randerLeaf()：绘制最底层叶子节点。getMaxChildHeight()：递归计算每个节点的最大子节点数量，确定子节点排列方式。getLineWidth()：计算文本宽度，设置最小宽度，确保线条足够长以容纳文本。createTag()：辅助函数，创建SVG元素。createMonth()：辅助函数，创建月份节点。
代码已实现大部分功能，包括月份节点宽度自适应、文本长度自适应以及基本图形绘制。但仍有以下待完善部分：
子集展开/收缩功能： 允许用户展开或收缩子节点，提高交互性。线条颜色配置： 允许用户自定义线条颜色，增强视觉效果。整体收缩/展开功能： 允许用户一次性展开或收缩整个鱼骨图。图自适应大小功能： 根据内容自动调整鱼骨图大小，适应不同屏幕尺寸。节点事件绑定： 允许用户与节点交互，例如点击节点显示更多信息。
这些功能需要根据实际需求补充完善。代码已预留相关接口和变量，方便扩展。例如，可在arr数据中添加事件属性，并在创建元素时绑定事件监听器实现节点事件。
此代码提供了一个功能完善的鱼骨图基础，用户可根据自身需求进行定制和扩展，原生SVG的特性保证了灵活性与可控性。
以上就是如何使用原生JavaScript绘制复杂的、可定制的鱼骨图？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1112678.html
微信扫一扫 
支付宝扫一扫 
