一种基于d3鱼骨对节点的操作方法与流程

1.本发明涉及软件开发领域，尤其涉及一种基于d3鱼骨对节点的操作方法。


背景技术：

2.在工业设计中，工程师可以运用鱼骨图进行产品设计、工艺分析、故障分析等，鱼骨图通过标识出产品涉及到的具体问题，将问题标识在一个鱼骨上，鱼骨上的主骨对应产生这个问题的原因，逐步分析，从而找到解决问题的方法。
3.现有的d3绘制鱼骨图的方法生成的是一整个鱼骨，缺少对主骨的增加、删除、移动的功能，不便于对产生问题的原因进行具体的分析。


技术实现要素：

4.本发明的目的是为了解决现有技术中存在的缺点，而提出的一种基于d3鱼骨对节点的操作方法。
5.为实现上述目的，本发明采用了如下技术方案：一种基于d3鱼骨对节点的操作方法，包括以下步骤：s1：通过d3渲染一副完整的鱼骨；所述完整的鱼骨包括鱼头、主骨、大骨，一个鱼骨对应一个问题；d3通过创建节点元素组件即createelement组件生成鱼头节点、大骨节点；所述每个节点有对应的id、层级、数据；所述数据为具体的原因；所述鱼头节点数据是指工程师分析产品时遇到的具体问题，鱼头节点处于鱼骨节点层级结构中的第一层；所述大骨节点数据为产生鱼头节点数据对应问题的主要原因，包括骨1节点、骨2节点、骨3节点、骨4节点等，每一个大骨节点数据对应一个原因，大骨节点处于节点层级结构中的第二层。
6.s2：对大骨节点进行增加中骨节点、删除中骨节点、移动中骨节点操作；包括如下子步骤：s21：在大骨节点上增加对应的中骨节点；工程师对各个大骨节点对应的原因进行进一步判断，如果大骨节点对应的原因可以进一步细分为子原因，则在大骨节点上增加子原因对应的中骨节点；如果大骨节点对应的原因不能进一步细分为子原因，则不添加对应的中骨节点；所述中骨节点在节点层级结构中处于第三层，为大骨节点的子节点；通过获取元素id组件即getelementbyid组件根据大骨节点的id获取当前大骨节点的层级和数据；通过添加子节点组件即appendchild组件在获取的大骨节点下增加对应的中骨节点；s22：删除大骨节点所包含的中骨节点；
工程师对各个大骨节点包含的中骨节点对应的原因进行进一步判断，如果中骨节点对应的原因不是构成大骨节点对应原因的必要原因，则在大骨节点上删除子原因对应的中骨节点；如果中骨节点对应的原因是构成大骨节点对应原因的必要原因，则不删除子原因对应的中骨节点；通过获取元素id组件即getelementbyid组件根据大骨节点的id获取当前大骨节点的层级和数据；通过删除子节点组件即removechild组件删除工程师想要删除的大骨节点所包含的中骨节点；s23：移动大骨节点的中骨节点；工程师对各个大骨节点包含的中骨节点对应的原因进行进一步判断，如果中骨节点对应的原因不是构成对应大骨节点对应原因的必要原因，而是构成其他大骨节点对应原因的必要原因，则移动中骨节点到正确的大骨节点下；如果不是，则不需要移动；获取元素id组件即getelementbyid组件组件获取当前中骨节点的层级和数据及移动后对应大骨节点的层级和数据，遍历节点数组，通过删除子节点组件即removechild组件删除当前节点，并在获取到的移动后大骨节点下通过添加子节点组件即appendchild组件增加对应的中骨节点。
7.s3：完成对节点的操作，生成问题对应的鱼骨图。
8.与现有技术相比，本发明的有益效果为：本发明提出的基于d3鱼骨对节点的操作方法实现了在鱼骨图中增加鱼骨节点、删除鱼骨节点、移动鱼骨节点的功能，工程师运用鱼骨图进行问题分析时，可以对产生问题的原因进行进一步的分析，即对鱼骨节点进一步生成子鱼骨节点，分析过程中可以删除非主要原因对应的鱼骨节点或修改鱼骨节点内容，更能够清楚便捷地分析出产生问题的原因、找到关键原因，从而获得解决问题的办法。
具体实施方式
9.为使对本发明的目的、构造、特征、及其功能有进一步的了解，兹配合实施例详细说明如下。
10.一种基于d3鱼骨对节点的操作方法，包括以下步骤：s1：通过d3渲染一副完整的鱼骨；所述完整的鱼骨包括鱼头、主骨、大骨，一个鱼骨对应一个问题；d3通过创建节点元素组件即createelement组件生成鱼头节点、大骨节点；所述每个节点有对应的id、层级、数据、数据；d3通过绘制直线组件即svg.append("line")组件绘制主骨，包括主骨直线的起点坐标、终点坐标、直线的宽度以及直线终点处的箭头标记；所述主骨直线终点处的箭头连接鱼头节点；例如将主骨直线的宽度设置为3；通过attr("marker-end","url(#arrow)")方法绘制直线终点处的箭头标记；所述鱼头节点数据是指工程师分析产品时遇到的具体问题，鱼头节点处于鱼骨节点层级结构中的第一层；所述大骨节点数据为产生鱼头节点数据对应问题的主要原因，包括骨1节点、骨2
节点、骨3节点、骨4节点等，每一个大骨节点数据对应一个原因，大骨节点处于节点层级结构中的第二层；进一步地，d3通过绘制直线组件即svg.append("line")组件绘制大骨，包括大骨直线的起点坐标、终点坐标、直线的宽度以及直线终点处的箭头标记；所述大骨直线的箭头与主骨直线相交；例如设置大骨直线的宽度为2；通过d3设置大骨节点的起点和终点坐标，确保大骨直线箭头与主骨直线相交并与主骨直线成60度角，形成鱼骨形状，通过大骨节点的终点坐标设置保证各大骨节点间的间距相等使鱼骨图形状更加清晰明了。
11.s2：对大骨节点进行增加中骨节点、删除中骨节点、移动中骨节点操作；包括如下子步骤：s21：在大骨节点上增加对应的中骨节点；工程师对各个大骨节点对应的原因进行进一步判断，如果大骨节点对应的原因可以进一步细分为子原因，则在大骨节点上增加子原因对应的中骨节点；如果大骨节点对应的原因不能进一步细分为子原因，则不添加对应的中骨节点；所述大骨节点的骨1节点所生成的子节点为中骨1-1、中骨1-2等，大骨节点的骨2节点所生成的子节点为中骨2-1、中骨2-2等；所述中骨节点在节点层级结构中处于第三层，为大骨节点的子节点；通过获取元素id组件即getelementbyid组件根据大骨节点的id获取当前大骨节点的层级和数据；通过添加子节点组件即appendchild组件在获取的大骨节点下增加对应的中骨节点；d3通过绘制直线组件即svg.append("line")组件绘制中骨，包括中骨直线的起点坐标、终点坐标、直线的宽度以及直线终点处的箭头标记，所述中骨直线的箭头与对应的大骨直线相交，且中骨直线与主骨平行；例如设置中骨直线的宽度为1；进一步地，如果对应的中骨节点还可以细分为构成此中骨节点对应原因的子原因，则在此中骨节点下添加对应的小骨节点；所述小骨节点在节点层级结构中处于第四层，为中骨节点的子节点；通过将主骨直线、大骨直线以及中骨直线设置为不同的宽度，更直观地形成鱼骨图形状；s22：删除大骨节点所包含的中骨节点；工程师对各个大骨节点包含的中骨节点对应的原因进行进一步判断，如果中骨节点对应的原因不是构成大骨节点对应原因的必要原因，则在大骨节点上删除子原因对应的中骨节点；如果中骨节点对应的原因是构成大骨节点对应原因的必要原因，则不删除子原因对应的中骨节点；通过获取元素id组件即getelementbyid组件根据大骨节点的id获取当前大骨节点的层级和数据；通过删除子节点组件即removechild组件删除工程师想要删除的大骨节点所包含的中骨节点；s23：移动大骨节点的中骨节点；
工程师对各个大骨节点包含的中骨节点对应的原因进行进一步判断，如果中骨节点对应的原因不是构成对应大骨节点对应原因的必要原因，而是构成其他大骨节点对应原因的必要原因，则移动中骨节点到正确的大骨节点下；如果不是，则不需要移动；获取元素id组件即getelementbyid组件获取当前中骨节点的层级和数据及移动后对应大骨节点的层级和数据，遍历节点数组，删除当前节点，并在获取到的移动后大骨节点下添加当前中骨节点数据，通过绘制直线组件即svg.append("line")组件绘制新增中骨，包括中骨直线的起点坐标、终点坐标、直线的宽度以及直线终点处的箭头标记，所述中骨直线的箭头与对应的大骨直线相交，且中骨直线与主骨平行。
12.s3：完成对节点的操作，生成问题对应的鱼骨图。
13.本发明已由上述相关实施例加以描述，然而上述实施例仅为实施本发明的范例。必需指出的是，已揭露的实施例并未限制本发明的范围。相反地，在不脱离本发明的精神和范围内所作的更动与润饰，均属本发明的专利保护范围。