原生JavaScript绘制复杂鱼骨图详解
本文介绍如何使用纯JavaScript代码绘制复杂的、可定制的鱼骨图，无需借助第三方库如G6。我们将深入探讨代码实现，并指出代码中尚待完善的部分。
文章基于一个用户提供的复杂鱼骨图示例（见上图），该图包含多级子节点和节点文本信息，因此选择原生SVG绘制方式，直接在HTML中创建SVG元素构建鱼骨图，以获得更高的灵活性。
代码首先定义一个JSON数据结构arr，存储鱼骨图的节点和连接关系。每个节点包含label（标签）、value（值）、type（类型）、time（时间）和child（子节点）等属性。 核心部分是FishBone类，负责解析数据并使用SVG元素进行绘制。
立即学习“Java免费学习笔记（深入）”；
FishBone类包含以下关键方法：
-
initKvArray()：遍历数据，计算每个月份节点的宽度，并存储在kvArray中。宽度根据子节点中最长文本长度自适应调整。 -
getMaxWidth()：递归计算每个节点及其子节点中最长文本宽度，确定节点宽度。 -
randerMonthBox()：绘制月份节点（平行四边形）及其文本。月份节点的x坐标根据前一个节点宽度累加计算。 -
creatBigCircle()：绘制主干节点（圆圈）和连接线，并递归调用renderParent()绘制子节点。 -
renderParent()：递归绘制子节点，并计算子节点高度。 -
randerLeaf()：绘制最底层叶子节点。 -
getMaxChildHeight()：递归计算每个节点的最大子节点数量，确定子节点排列方式。 -
getLineWidth()：计算文本宽度，设置最小宽度，确保线条足够长以容纳文本。 -
createTag()：辅助函数，创建SVG元素。 -
createMonth()：辅助函数，创建月份节点。
代码已实现大部分功能，包括月份节点宽度自适应、文本长度自适应以及基本图形绘制。但仍有以下待完善部分：
- 子集展开/收缩功能： 允许用户展开或收缩子节点，提高交互性。
- 线条颜色配置： 允许用户自定义线条颜色，增强视觉效果。
- 整体收缩/展开功能： 允许用户一次性展开或收缩整个鱼骨图。
- 图自适应大小功能： 根据内容自动调整鱼骨图大小，适应不同屏幕尺寸。
- 节点事件绑定： 允许用户与节点交互，例如点击节点显示更多信息。
这些功能需要根据实际需求补充完善。代码已预留相关接口和变量，方便扩展。例如，可在arr数据中添加事件属性，并在创建元素时绑定事件监听器实现节点事件。
此代码提供了一个功能完善的鱼骨图基础，用户可根据自身需求进行定制和扩展，原生SVG的特性保证了灵活性与可控性。
