How to draw complex, customizable fish bone diagrams using native JavaScript?

Detailed explanation of the drawing of complex fish bones in native JavaScript

This article describes how to use pure JavaScript code to draw complex, customizable fish bone diagrams without the need to use third-party libraries such as G6. We will dive into code implementation in depth and point out the parts of the code that need to be improved.

The article is based on a user-provided example of a complex fish bone diagram (see the figure above). This diagram contains multi-level child nodes and node text information. Therefore, the native SVG drawing method is selected to directly create SVG elements in HTML to build fish bone diagrams for higher flexibility.

The code first defines a JSON data structure arr to store the node and connection relationship of the fish bone graph. Each node contains properties such as label (label), value (value), type , time (time), and child (child node). The core part is FishBone class, which is responsible for parsing the data and drawing using SVG elements.

The FishBone class contains the following key methods:

• initKvArray() : traverses the data, calculates the width of the node for each month, and stores it in kvArray . The width is adaptively adjusted according to the longest text length in the child nodes.
• getMaxWidth() : recursively calculates the longest text width in each node and its child nodes, and determines the node width.
• randerMonthBox() : Draws the month node (parallelogram) and its text. The x-coordinates of the month node are calculated based on the width of the previous node.
• creatBigCircle() : draws the main node (circle) and the connecting line, and recursively call renderParent() to draw the child nodes.
• renderParent() : Recursively draws the child nodes and calculates the child node height.
• randerLeaf() : Draw the lowest leaf node.
• getMaxChildHeight() : recursively calculates the maximum number of child nodes of each node and determines the arrangement of child nodes.
• getLineWidth() : Calculate the text width, set the minimum width, and make sure the lines are long enough to accommodate the text.
• createTag() : Helper function, create SVG element.
• createMonth() : Helper function, create month node.

The code has implemented most of the functions, including month node width adaptation, text length adaptation, and basic graph drawing. But there are still the following parts to be improved:

• Subset expansion/shrink function: allows users to expand or shrink child nodes to improve interactivity.
• Line color configuration: Allows users to customize line colors to enhance visual effects.
• Overall contraction/expand function: allows the user to expand or shrink the entire fish bone diagram at one time.
• Picture adaptive size function: automatically adjust the size of the fish bone diagram according to the content to adapt to different screen sizes.
• Node event binding: allows users to interact with nodes, such as clicking on nodes to display more information.

These functions need to be supplemented and improved according to actual needs. The code has reserved relevant interfaces and variables for easy expansion. For example, you can add event attributes in arr data and bind an event listener to implement node events when creating elements.

This code provides a complete fishbone diagram foundation, which users can customize and expand according to their own needs. The characteristics of native SVG ensure flexibility and controllability.

The above is the detailed content of How to draw complex, customizable fish bone diagrams using native JavaScript?. For more information, please follow other related articles on the PHP Chinese website!