原生JS绘制定制鱼骨图详解教程

本文提供一个使用原生JavaScript绘制复杂可定制鱼骨图的完整教程，无需任何第三方库。教程以一个包含多级子节点和节点文本信息的复杂示例为基础，详细讲解了如何利用SVG元素构建鱼骨图，并实现节点宽度自适应、文本长度自适应等功能。核心代码包含`FishBone`类，其关键方法涵盖数据解析、节点绘制、连接线绘制以及递归绘制子节点等。尽管已实现大部分功能，但文章也指出了待完善的部分，例如子节点展开/收缩、线条颜色配置、整体收缩/展开、图自适应大小以及节点事件绑定等，为后续的代码扩展提供了方向，最终实现一个灵活、可控的自定义鱼骨图。

原生JavaScript绘制复杂鱼骨图详解

本文介绍如何使用纯JavaScript代码绘制复杂的、可定制的鱼骨图，无需借助第三方库如G6。我们将深入探讨代码实现，并指出代码中尚待完善的部分。

文章基于一个用户提供的复杂鱼骨图示例（见上图），该图包含多级子节点和节点文本信息，因此选择原生SVG绘制方式，直接在HTML中创建SVG元素构建鱼骨图，以获得更高的灵活性。

代码首先定义一个JSON数据结构arr，存储鱼骨图的节点和连接关系。每个节点包含label（标签）、value（值）、type（类型）、time（时间）和child（子节点）等属性。 核心部分是FishBone类，负责解析数据并使用SVG元素进行绘制。

FishBone类包含以下关键方法：

• initKvArray()：遍历数据，计算每个月份节点的宽度，并存储在kvArray中。宽度根据子节点中最长文本长度自适应调整。
• getMaxWidth()：递归计算每个节点及其子节点中最长文本宽度，确定节点宽度。
• randerMonthBox()：绘制月份节点（平行四边形）及其文本。月份节点的x坐标根据前一个节点宽度累加计算。
• creatBigCircle()：绘制主干节点（圆圈）和连接线，并递归调用renderParent()绘制子节点。
• renderParent()：递归绘制子节点，并计算子节点高度。
• randerLeaf()：绘制最底层叶子节点。
• getMaxChildHeight()：递归计算每个节点的最大子节点数量，确定子节点排列方式。
• getLineWidth()：计算文本宽度，设置最小宽度，确保线条足够长以容纳文本。
• createTag()：辅助函数，创建SVG元素。
• createMonth()：辅助函数，创建月份节点。

代码已实现大部分功能，包括月份节点宽度自适应、文本长度自适应以及基本图形绘制。但仍有以下待完善部分：

• 子集展开/收缩功能： 允许用户展开或收缩子节点，提高交互性。
• 线条颜色配置： 允许用户自定义线条颜色，增强视觉效果。
• 整体收缩/展开功能： 允许用户一次性展开或收缩整个鱼骨图。
• 图自适应大小功能： 根据内容自动调整鱼骨图大小，适应不同屏幕尺寸。
• 节点事件绑定： 允许用户与节点交互，例如点击节点显示更多信息。

这些功能需要根据实际需求补充完善。代码已预留相关接口和变量，方便扩展。例如，可在arr数据中添加事件属性，并在创建元素时绑定事件监听器实现节点事件。

此代码提供了一个功能完善的鱼骨图基础，用户可根据自身需求进行定制和扩展，原生SVG的特性保证了灵活性与可控性。

本篇关于《原生JS绘制定制鱼骨图详解教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！