Self-adaptive layout method, system and equipment based on fishbone diagram structure and medium

Abstract

The invention discloses a self-adaptive layout method, system and device based on a fishbone diagram structure and a medium, and relates to the field of data visualization, and the method comprises the steps: carrying out the classification processing of each node data in a node data set based on a node identifier, so as to obtain a main node set and a sub-node set corresponding to each main node in the main node set; calculating a chart width according to the number of the main nodes and a preset main node step length, and determining a layout center point position based on the chart width and a canvas width; determining the position of each main node according to the position of the central point, a preset main node step length and the index value of each main node; determining the position of each child node according to the position of each main node, the index value of each child node, the preset branch step length and the position mark of each child node; generating a fishbone type layout diagram based on the position of each main node, the position of each sub-node and the layout parameters; the method improves the layout calculation efficiency, and can adapt to different canvas sizes and data scales.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization, and more specifically, to an adaptive layout method, system, device and medium based on a fishbone diagram structure. Background Art

[0002] In the field of data visualization, especially when it is necessary to display a hierarchical structure with a trunk-branch relationship, the following several graphic layout techniques are usually adopted: Tree layout: Arrange data in a strict hierarchical relationship from top to bottom or from left to right, which is suitable for displaying simple hierarchical structures, but it appears monotonous and has low space utilization when expressing complex relationships. Force-directed layout: By simulating a physical mechanics system, let the nodes interact with each other to reach an equilibrium state. Although this method can generate beautiful layouts, the computational complexity is high, and it is difficult to precisely control the node positions. Circular layout: Arrange the nodes on one or more concentric circles, which is suitable for displaying cyclic relationships, but it is not intuitive enough when expressing hierarchical structures. Traditional fishbone diagram layout: Usually adopts fixed spacing and simple linear distribution algorithms, lacking flexibility and adaptability.

[0003] Generally speaking, the deficiencies of the above existing several graphic layout techniques are mainly reflected in the following points: 1. Lack of parametric configuration: Most layout algorithms use hard-coded fixed parameters and are difficult to adjust according to different scenarios.

[0004] 2. Low efficiency of node mapping mechanism: Traditional methods usually need to traverse the node set multiple times, and the performance is poor in large-scale data scenarios.

[0005] 3. Inflexible layout calculation: Existing algorithms often adopt simple linear distribution and cannot achieve complex visual effects.

[0006] 4. Lack of adaptive mechanism: Unable to dynamically adjust the layout center and node distribution according to the canvas size, resulting in inconsistent visual effects in different display environments.

[0007] 5. Single distribution of branch nodes: Lack of effective branch node distribution algorithms and cannot achieve complex visual effects such as up-and-down staggering.

[0008] 6. Poor user experience: Especially for users who are not familiar with a specific field, the existing visualization methods are difficult to understand and use.

[0009] In summary, at the present stage, there is an urgent need to develop an adaptive layout method and system based on a fishbone diagram structure to solve one or more of the above existing problems. Summary of the Invention

[0010] An object of the present invention is to provide a new technical solution for an adaptive layout method, system, device and medium based on a fishbone diagram structure.

[0011] According to a first aspect of the present invention, an adaptive layout method based on a fishbone diagram structure, the method includes: Perform conversion processing on the data to be processed to obtain a set of node data; Classify each node data in the node data set based on node identifiers to obtain a set of main nodes and a set of child nodes corresponding to each main node in the set of main nodes; Calculate the chart width based on the number of main nodes in the set of main nodes and a preset main node step length, and determine the layout center point position based on the chart width and the canvas width; Traverse the set of main nodes, and determine the position of each main node according to the layout center point position, the preset main node step length, and the index value of each main node; Traverse the set of child nodes of each main node, and determine the position of each child node according to the position of each main node, the index value of each child node, a preset branch step length, and the position mark of each child node; Generate a fishbone layout diagram based on the position of each main node, the position of each child node, and layout parameters, where the layout parameters include the preset main node step length and the preset branch step length.

[0012] Optionally, the classifying each node data in the node data set based on node identifiers to obtain a set of main nodes and a set of child nodes corresponding to each main node in the set of main nodes specifically includes: Traverse the node data set. If it is determined that the current node is a main node based on the node identifier, create a copy node of the current node and add the copy node to the set of main nodes; if it is determined that the current node is a branch node and there is a corresponding main node based on the node identifier, add the current node to the set of child nodes of the corresponding main node.

[0013] Optionally, if it is determined that the current node is a branch node and there is a corresponding main node based on the node identifier, adding the current node to the set of child nodes of the corresponding main node specifically is: When it is determined that the current node is a branch node and there is a corresponding main node based on the node identifier, check whether the corresponding main node already has a set of child nodes; If the corresponding main node has no set of child nodes, first initialize an empty set of child nodes, and then add the current node to the empty set of child nodes; otherwise, directly add the current node to the existing set of child nodes of the corresponding main node.

[0014] Optionally, determining the position of the layout center point based on the chart width and the canvas width specifically includes: Obtain the width difference between the chart width and the canvas width; If the width difference is greater than a preset width threshold, take the midpoint position of the chart width as the position of the layout center point; If the width difference is less than the preset width threshold, take the midpoint position of the canvas width as the position of the layout center point.

[0015] Optionally, determining the position of each main node according to the position of the layout center point, the preset main node step size, and the index value of each main node specifically includes: According to the abscissa X of the layout center point o , the preset main node step size L 主 and the index value D of each main node 主 Calculate the abscissa X of the position of each main node 主 , and its calculation formula is expressed as: X 主 =X o -D 主 ×L 主 (1) Set the ordinate Y of the position of each main node 主 to 0.

[0016] Optionally, determining the position of each child node according to the position of each main node, the index value of each child node, the preset branch step size, and the position mark of each child node specifically includes: According to the index value D of each child node 子 and the preset branch step size L 子 Calculate the diagonal offset pL, and its calculation formula is expressed as: pL=(D 子 +1)×L 子 ÷ (2) Use the abscissa X of the position of each main node 主 and the diagonal offset pL to calculate the abscissa X of the position of each child node 子 , and its calculation formula is expressed as: X 子 =X 主 -pL (3) Based on the position mark of each child node and use the ordinate Y of the position of each main node 主 and the diagonal offset pL to calculate the ordinate Y of the position of each child node 子 , and its calculation formula is expressed as: When the position mark of the child node is an even number: Y子 = Y 主 + pL(4) When the position marker of the child node is odd: Y 子 = Y 主 - pL(5).

[0017] According to a second aspect of the present invention, there is provided an adaptive layout system based on a fishbone diagram structure, the system comprising: A conversion module configured to perform conversion processing on data to be processed to obtain a set of node data; A node processing module configured to classify each node data in the set of node data based on a node identifier to obtain a set of main nodes and a set of child nodes corresponding to each main node in the set of main nodes; An adaptive adjustment module configured to calculate a chart width based on the number of main nodes in the set of main nodes and a preset main node step length, and determine a layout center point position based on the chart width and a canvas width; A layout calculation module configured to traverse the set of main nodes, determine the position of each main node according to the layout center point position, the preset main node step length, and the index value of each main node; traverse the set of child nodes of each main node, and determine the position of each child node according to the position of each main node, the index value of each child node, a preset branch step length, and the position marker of each child node; A visualization layout module configured to generate a fishbone layout diagram based on the position of each main node, the position of each child node, and layout parameters, wherein the layout parameters include the preset main node step length and the preset branch step length.

[0018] Optionally, the system further comprises: A configuration module configured to call a configuration function to obtain the layout parameters, wherein the layout parameters further include a node distribution direction, a branch card size, and a node size.

[0019] According to a third aspect of the present invention, there is provided an electronic device, the electronic device comprising a memory and a processor, the memory storing a computer program, and when the processor executes the computer program, implementing the steps in an adaptive layout method based on a fishbone diagram structure as described in the first aspect of the present invention above.

[0020] According to a fourth aspect of the present invention, there is provided a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, implementing the steps in an adaptive layout method based on a fishbone diagram structure as described in the first aspect of the present invention above.

[0021] According to an embodiment disclosed by the present invention, an adaptive layout method and system based on a fishbone diagram structure of the present invention have the following beneficial effects: An adaptive layout method and system based on a fishbone diagram structure of the present invention reduce the number of node traversals through an efficient node mapping mechanism, improving the layout calculation efficiency; achieve a more aesthetic and information-clear visual effect through a flexible branch node distribution algorithm; enable the layout to adapt to different canvas sizes and data scales through an adaptive layout mechanism; enable the layout algorithm to be flexibly adjusted according to different scenarios through a parameterized configuration system; overall, improve the overall user experience of data visualization and can significantly improve business efficiency in practical applications.

[0022] Through the following detailed description of the exemplary embodiments of the present invention with reference to the accompanying drawings, other features and advantages of the present invention will become clear. BRIEF DESCRIPTION OF THE DRAWINGS

[0023] The accompanying drawings incorporated in and constituting a part of this specification illustrate embodiments of the present invention and, together with the description, serve to explain the principles of the present invention.

[0024] Figure 1 FIG. is a schematic flowchart of an adaptive layout method based on a fishbone diagram structure provided according to an embodiment; Figure 2 FIG. is a schematic flowchart of the specific process of node classification and processing provided according to an embodiment; Figure 3 FIG. is a schematic flowchart of the specific process of an adaptive layout mechanism provided according to an embodiment; Figure 4 FIG. is a schematic flowchart of the specific process of layout calculation provided according to an embodiment; Figure 5 FIG. is a schematic diagram of a specific implementation process taking an organizational structure diagram as an example provided according to this embodiment; Figure 6 FIG. is a structural block diagram of an adaptive layout system based on a fishbone diagram structure provided according to an embodiment; Figure 7 FIG. is a schematic diagram of an electronic device. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0025] Now, various exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings. It should be noted that: unless otherwise specifically stated, the relative arrangements, numerical expressions, and numerical values of the components and steps set forth in these embodiments do not limit the scope of the present invention.

[0026] The following description of at least one exemplary embodiment is merely illustrative in nature and in no way limits the present invention, its application, or its use.

[0027] Technologies, methods, and devices known to those of ordinary skill in the relevant art may not be discussed in detail, but where appropriate, such technologies, methods, and devices should be regarded as part of the specification.

[0028] In all the examples shown and discussed herein, any specific values should be construed as merely exemplary and not as a limitation. Thus, other examples of the exemplary embodiments may have different values.

[0029] Embodiment 1: See Figure 1 As shown, an embodiment of the present invention provides an adaptive layout method based on a fishbone diagram structure, the method comprising: Step S1: Perform conversion processing on the data to be processed to obtain a set of node data.

[0030] It should be noted that in this step, according to specific application requirements, the application requirement data needs to be converted before layout processing into a set of node data. For example, for the requirement of laying out an organizational structure graph, the organizational structure data (including data on departments and sub - departments or positions) needs to be first converted into node data (including main node data and branch node data).

[0031] Specific application requirements in this embodiment include: requirements for organizational chart layout to display the organizational structure of a company or department, where the main nodes represent departments and the branch nodes represent sub - departments or positions; requirements for knowledge graph layout to display the association relationships between knowledge points, where the main nodes represent main concepts and the branch nodes represent related concepts; requirements for system architecture diagram layout to display the components of a system and their relationships, where the main nodes represent main modules and the branch nodes represent sub - modules; requirements for project management diagram layout to display the task breakdown structure of a project, where the main nodes represent main tasks and the branch nodes represent sub - tasks; requirements for quality improvement analysis to analyze the root causes of problems; requirements for logistics and warehousing layout to significantly improve layout efficiency.

[0032] Step S2: Classify each piece of node data in the set of node data based on node identifiers to obtain a set of main nodes and a set of child nodes for each main node in the corresponding set of main nodes.

[0033] In this step, by traversing all node number sets, classifying and processing the main nodes and branch nodes, the parent - child relationship between the main nodes and branch nodes is established, laying a foundation for subsequent layout calculations.

[0034] Optionally, step S2 in the adaptive layout method based on the fishbone diagram structure of this example specifically includes: Step S21: Traverse the node data set. If the current node is determined to be the main node based on the node identifier, create a copy node of the current node and add the copy node to the main node set. Step S22: If the current node is determined to be a branch node based on the node identifier and there is a corresponding main node, add the current node to the child node set of the corresponding main node.

[0035] Optionally, in the adaptive layout method based on the fishbone diagram structure in this example, step S22 is specifically as follows: When it is determined that the current node is a branch node based on the node identifier and there is a corresponding main node, check whether the corresponding main node already has a child node set; if the corresponding main node has no child node set, first initialize an empty child node set, and then add the current node to the empty child node set; otherwise, directly add the current node to the existing child node set of the corresponding main node.

[0036] Specifically, Figure 2 The specific process of node classification and processing is shown: 1. Main node identification and collection: Traverse all node data. When the type flag in the node identifier is'main', first create a copy node of this node (i.e., the copy object), then add the copy object to the main node set (here the nodes are stored in an array, that is, the main node array), and finally establish the corresponding relationship between the index value and the node in the mapping object. Subsequently, when doing the layout, directly find the corresponding node through the index value without having to traverse the node data again each time.

[0037] 2. Branch node association: Traverse all node data. When the type flag in the node identifier is 'branch' and the parent node identifier in the node identifier exists, that is, there is a corresponding parent node, first check whether the parent node already has a corresponding child node set. If the parent node does not have a corresponding child node set, an empty array needs to be initialized to establish an empty child node set, and finally add the branch node to the newly created child node set of this parent node.

[0038] Step S3: Calculate the chart width based on the number of main nodes in the main node set and the preset main node step length, and determine the layout center point position based on the chart width and the canvas width.

[0039] Optionally, step S3 in the adaptive layout method based on the fishbone diagram structure in this example includes: Step S31: The chart width can be obtained by calculating the product of the number of main nodes and the preset main node step length.

[0040] Optionally, step S3 in the adaptive layout method based on the fishbone diagram structure in this example further includes: Step S32: Obtain the width difference between the chart width and the canvas width; Step S33: If the width difference is greater than the preset width threshold, take the midpoint position of the chart width as the layout center point position; if the width difference is less than the preset width threshold, take the midpoint position of the canvas width as the layout center point position.

[0041] In this embodiment, by comparing the chart width and the canvas width, the layout center is dynamically adjusted to ensure that the layout is automatically centered and displayed under different canvas sizes, so that the layout can maintain a good visual effect under different canvas sizes. This adaptive layout mechanism in this embodiment realizes the horizontal distribution of the main nodes and the oblique distribution of the branch nodes, forming the visual effect of a fishbone diagram.

[0042] Preferably, the preset width threshold in the adaptive layout method based on the fishbone diagram structure in this example can be 100. It should be noted that the preset width threshold in this embodiment can also be other data values, which are determined according to different application requirements and the canvas width, and will not be listed one by one here.

[0043] Specifically, Figure 3 The specific process of the adaptive layout mechanism in this embodiment is shown in detail: 1. Calculate the chart width: Chart width = number of main nodes × preset main node step size; 2. Dynamically adjust the X coordinate of the layout center point: If (chart width + 100) is less than the canvas width, the layout center point is taken as the midpoint of the chart width; otherwise, the layout center point is taken as the midpoint of the canvas width.

[0044] Step S4: Traverse the main node set, and determine the position of each main node according to the layout center point position, the preset main node step size, and the index value of each main node.

[0045] Optionally, step S4 in the adaptive layout method based on the fishbone diagram structure in this example specifically includes: According to the abscissa X of the layout center point position o 、the preset main node step size L 主 and the index value D of each main node 主 Calculate the abscissa X of the position of each main node 主 , and its calculation formula is expressed as: X 主 =X o -D 主 ×L 主 (1) Set the ordinate Y of the position of each main node 主 to 0.

[0046] Step S5: Traverse the set of child nodes of each main node, and determine the position of each child node according to the position of each main node, the index value of each child node, the preset branch step size, and the position mark of each child node.

[0047] Optionally, in the adaptive layout method based on the fishbone diagram structure in this embodiment, step S5 specifically includes: According to the index value D of each child node 子 and the preset branch step size L 子 calculate the diagonal offset pL, and its calculation formula is expressed as: pL = (D 子 + 1) × L 子 ÷ (2) Use the abscissa X of each main node position 主 and the diagonal offset pL to calculate the abscissa X of each child node position 子 , and its calculation formula is expressed as: X 子 = X 主 - pL (3) [[ID= thirty-one ]]Based on the position mark of each child node and using the ordinate Y of each main node position 主 and the diagonal offset pL to calculate the ordinate Y of each child node position 子 , and its calculation formula is expressed as: When the position mark of the child node is an even number: Y 子 = Y 主 + pL (4) When the position mark of the child node is an odd number: Y 子 = Y 主 - pL (5).

[0048] It should be noted that when the position mark of the child node is an even number, it is offset upward for layout, adding the diagonal offset to the original ordinate. When the position mark of the child node is an odd number, it is offset downward for layout, subtracting the diagonal offset from the original ordinate to form the fishbone layout effect.

[0049] Here, steps S4 and S5 show the layout calculation algorithm of this embodiment. By calculating the positions of the main nodes and the child nodes, the horizontal distribution of the main nodes and the diagonal distribution of the branch nodes are realized, and finally the visual effect of the fishbone diagram is formed. Specifically, Figure 4 shows the specific layout calculation process: 1. Calculate the position of the main node: Traverse all the main nodes, calculate the abscissa of each main node in the index order, then fix the ordinate of each main node to 0, and finally write the calculation result into the original node object.

[0050] 2. Calculate the positions of branch nodes: Traverse the set of child nodes of each main node. For each child node, first calculate the diagonal offset, then calculate the abscissa of the child node. After that, determine whether the position mark of the node is even or odd, and use different calculation formulas to calculate the ordinate of the child node to ensure the distribution of child nodes.

[0051] Step S6: Generate a fishbone layout diagram based on the positions of each main node, the positions of each child node, and layout parameters, where the layout parameters include a preset main node step length and a preset branch step length.

[0052] In this step, a visual fishbone layout diagram can be generated based on the calculated positions of each main node, the positions of each child node, and the pre-configured layout parameters.

[0053] Optionally, before step S1 in the adaptive layout method based on the fishbone diagram structure of this example, it further includes: Step S0: Call a configuration function to obtain layout parameters, where the layout parameters further include the node distribution direction, the branch card size, and the node size.

[0054] In this embodiment, a default configuration function is defined according to the specific application scenario. This function can return a configuration object containing layout parameters, and the layout parameters can be adjusted according to the specific application scenario to improve the flexibility and adaptability of the layout.

[0055] The layout parameters specifically included in the configuration object here are as follows: 1. center: The coordinates of the layout center point, with an initial value of [0, 0]; 2. direction: The distribution direction of the two parts of nodes, defaulting to the left - right direction; 3. getHGap: The horizontal spacing acquisition function, for example: returns a fixed value of 20 pixels; 4. getWGap: The vertical spacing acquisition function, for example: returns a fixed value of 20 pixels; 5. getBranchCardHeight: The branch card height acquisition function, for example: returns 60 pixels; 6. getBranchCardWidth: The branch card width acquisition function, for example: returns 216 pixels; 7. getBranchCardOffsetX: The branch card X - axis offset acquisition function, for example: returns 12 pixels; 8. getBranchCardOffsetY: The branch card Y - axis offset acquisition function, for example: returns 0 pixels; 9. nodeSize: The node size, for example: fixed at 20 pixels.

[0056] Taking an organizational structure diagram as an example, as follows Figure 5 shown, the implementation steps of this embodiment are as follows: 1. Prepare data: Convert the organizational structure data into node data, including main nodes (departments) and branch nodes (sub-departments or positions).

[0057] 2. Configure layout parameters: Configure layout parameters according to actual needs, such as the center point, direction, spacing, etc.

[0058] 3. Apply the layout algorithm: Call the layout calculation algorithm of this embodiment to calculate the position coordinates of the layout center point, the position coordinates of the main nodes, and the position coordinates of the sub-nodes.

[0059] 4. Render the graph: Render the organizational structure diagram according to the calculated position coordinates of the layout center point, the position coordinates of the main nodes, and the position coordinates of the sub-nodes.

[0060] In summary, the adaptive layout method based on the fishbone diagram structure in the embodiment of the present invention has the following advantages: 1. Adopt an efficient node mapping mechanism, quickly establish the association relationship between nodes through object mapping, can avoid multiple traversals in the traditional method, improve the layout efficiency, support complex parent-child relationship mapping, and adapt to multi-level data structures.

[0061] 2. Adopt a flexible branch node distribution algorithm, which can achieve the uniform distribution of branch nodes only through mathematical calculations, support odd and even position judgment, achieve a visual effect of staggered up and down, ensure that the branch nodes are distributed in a fishbone shape, and then achieve a more beautiful and clear visual effect of information.

[0062] 3. Adopt an adaptive layout mechanism, dynamically adjust the layout center position according to the chart width and the canvas width, dynamically respond to the change of the canvas size, and ensure good visual effects at different sizes.

[0063] 4. Support dynamic calculation of parameter values through a functional configuration method, all key layout parameters can be configured, support multiple layout directions and style configurations, and improve the adaptability of the algorithm.

[0064] Therefore, the adaptive layout method based on the fishbone diagram structure in the embodiment of the present invention reduces the number of node traversals through an efficient node mapping mechanism, improves the layout calculation efficiency; achieves a more beautiful and clear visual effect of information through a flexible branch node distribution algorithm; enables the layout to adapt to different canvas sizes and data scales through an adaptive layout mechanism; enables the layout algorithm to be flexibly adjusted according to different scenarios through a parameterized configuration system; overall, it improves the overall user experience of data visualization and can significantly improve business efficiency in practical applications.

[0065] Embodiment 2: An embodiment of the present invention provides an adaptive layout system based on a fishbone diagram structure. Refer to Figure 6 As shown, the system 100 includes: A conversion module 20, configured to perform conversion processing on the data to be processed to obtain a node data set; A node processing module 30, configured to classify each node data in the node data set based on a node identifier to obtain a main node set and a sub-node set corresponding to each main node in the main node set; An adaptive adjustment module 40, configured to calculate a chart width according to the number of main nodes in the main node set and a preset main node step size, and determine the layout center point position based on the chart width and the canvas width; A layout calculation module 50, configured to traverse the main node set, determine the position of each main node according to the layout center point position, the preset main node step size, and the index value of each main node; traverse the sub-node set of each main node, and determine the position of each sub-node according to the position of each main node, the index value of each sub-node, the preset branch step size, and the position mark of each sub-node; A visualization layout module 60, configured to generate a fishbone layout diagram based on the position of each main node, the position of each sub-node, and layout parameters, where the layout parameters include a preset main node step size and a preset branch step size.

[0066] Optionally, the adaptive layout system based on the fishbone diagram structure in this embodiment further includes: A configuration module 10, configured to call a configuration function to obtain layout parameters, where the layout parameters further include a node distribution direction, a branch card size, and a node size.

[0067] Optionally, the node processing module 30 in the adaptive layout system based on the fishbone diagram structure in this embodiment is specifically configured to: Traverse the node data set. If it is determined that the current node is a main node based on the node identifier, create a copy node of the current node and add the copy node to the main node set; if it is determined that the current node is a branch node and there is a corresponding main node based on the node identifier, add the current node to the sub-node set of the corresponding main node.

[0068] Optionally, the node processing module 30 in the adaptive layout system based on the fishbone diagram structure in this embodiment is further specifically configured to: When it is determined that the current node is a branch node and there is a corresponding main node based on the node identifier, check whether the corresponding main node already has a sub-node set; If the corresponding main node has no child node set, first initialize an empty child node set, and then add the current node to the empty child node set; otherwise, directly add the current node to the existing child node set of the corresponding main node.

[0069] Optionally, in the adaptive layout system based on the fishbone diagram structure of this embodiment, the adaptive adjustment module 40 is specifically configured to: Obtain the width difference between the chart width and the canvas width; If the width difference is greater than the preset width threshold, use the midpoint position of the chart width as the layout center point position; If the width difference is less than the preset width threshold, use the midpoint position of the canvas width as the layout center point position.

[0070] Optionally, in the adaptive layout system based on the fishbone diagram structure of this embodiment, the layout calculation module 50 is specifically configured to: According to the abscissa X of the layout center point position o , the preset main node step length L 主 and the index value D of each main node 主 Calculate the abscissa X of each main node position 主 , and its calculation formula is expressed as: X 主 =X o -D 主 ×L 主 (1) Set the ordinate Y of each main node position 主 to 0.

[0071] Optionally, in the adaptive layout system based on the fishbone diagram structure of this embodiment, the layout calculation module 50 is specifically further configured to: According to the index value D of each child node 子 and the preset branch step length L 子 Calculate the oblique offset pL, and its calculation formula is expressed as: pL=(D 子 +1)×L 子 ÷ (2) Use the abscissa X of each main node position 主 and the oblique offset pL to calculate the abscissa X of each child node position 子 , and its calculation formula is expressed as: X 子 =X 主 -pL (3) Based on the position mark of each child node and use the ordinate Y of each main node position 主The ordinate Y of each child node position is calculated from the vertical offset pL 子 , and its calculation formula is expressed as: When the position flag of the child node is even: Y 子 =Y 主 +pL (4) When the position flag of the child node is odd: Y 子 =Y 主 -pL (5).

[0072] Example 3: The present invention discloses an electronic device. The electronic device includes a memory and a processor. The memory stores a computer program. When the processor executes the computer program, the steps in an adaptive layout method based on a fishbone diagram structure according to any one of the disclosed embodiments of the present invention are implemented.

[0073] Figure 7 FIG. is a structural diagram of an electronic device according to an embodiment of the present invention. As Figure 7 shown, the electronic device includes a processor, a memory, a communication interface, a display screen, and an input device connected through a system bus. Among them, the processor of the electronic device is used to provide computing and control capabilities. The memory of the electronic device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the electronic device is used to communicate with an external terminal in a wired or wireless manner. The wireless manner can be implemented through WIFI, a carrier network, near field communication (NFC), or other technologies. The display screen of the electronic device can be a liquid crystal display screen or an electronic ink display screen. The input device of the electronic device can be a touch layer covered on the display screen, or a button, a trackball, or a touchpad provided on the outer shell of the electronic device, or an external keyboard, a touchpad, or a mouse, etc.

[0074] Those skilled in the art can understand that Figure 7 the structure shown in is only a structural diagram of a part related to the technical solution of the present disclosure, and does not constitute a limitation on the electronic device to which the application solution of the present application is applied. The specific electronic device may include more or fewer components than those shown in the figure, or combine some components, or have a different component layout.

[0075] Example 4: An embodiment of the present invention discloses a computer-readable storage medium. A computer program is stored on the computer-readable storage medium. When the computer program is executed by a processor, the steps in an adaptive layout method based on a fishbone diagram structure according to any one of the embodiments of the present invention are implemented.

[0076] Please note that the technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, it should be considered as within the scope described in this specification. The above embodiments only represent several implementation manners of the present application, and the description is relatively specific and detailed, but it should not be construed as a limitation on the scope of the invention patent. It should be noted that for those of ordinary skill in the art, without departing from the concept of the present application, several modifications and improvements can still be made, and these all belong to the protection scope of the present application. Therefore, the protection scope of the patent of the present application shall be subject to the appended claims.

[0077] The above is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present invention shall be included within the protection scope of the present invention.

[0078] Although some specific embodiments of the present invention have been described in detail by way of examples, those skilled in the art should understand that the above examples are only for illustration and not for limiting the scope of the present invention. Those skilled in the art should understand that the above embodiments can be modified without departing from the scope and spirit of the present invention. The scope of the present invention is defined by the appended claims.

Claims

1. An adaptive layout method based on a fishbone diagram structure, characterized in that, The method includes: Performing conversion processing on the data to be processed to obtain a set of node data; Classifying each piece of node data in the set of node data based on a node identifier to obtain a set of main nodes and a set of child nodes corresponding to each main node in the set of main nodes; Calculating a chart width based on the number of main nodes in the set of main nodes and a preset main node step length, and determining a layout center point position based on the chart width and a canvas width; Traversing the set of main nodes, and determining the position of each main node according to the layout center point position, the preset main node step length, and the index value of each main node; Traversing the set of child nodes of each main node, and determining the position of each child node according to the position of each main node, the index value of each child node, a preset branch step length, and the position mark of each child node; Generating a fishbone layout diagram based on the positions of each main node, the positions of each child node, and layout parameters, where the layout parameters include the preset main node step length and the preset branch step length.

2. The adaptive layout method based on the fishbone diagram structure according to claim 1, characterized in that The classifying each piece of node data in the set of node data based on a node identifier to obtain a set of main nodes and a set of child nodes corresponding to each main node in the set of main nodes specifically includes: Traversing the set of node data. If it is determined that the current node is a main node based on the node identifier, a copy node of the current node is created and added to the set of main nodes; if it is determined that the current node is a branch node based on the node identifier and there is a corresponding main node, the current node is added to the set of child nodes of the corresponding main node.

3. The adaptive layout method based on the fishbone diagram structure according to claim 2, wherein If it is determined that the current node is a branch node based on the node identifier and there is a corresponding main node, adding the current node to the set of child nodes of the corresponding main node specifically includes: When it is determined that the current node is a branch node based on the node identifier and there is a corresponding main node, checking whether the corresponding main node already has a set of child nodes; If the corresponding main node has no set of child nodes, first initialize an empty set of child nodes, and then add the current node to the empty set of child nodes; Otherwise, directly add the current node to the existing set of child nodes of the corresponding main node.

4. The adaptive layout method based on the fishbone diagram structure according to claim 1, characterized in that Determining the layout center point position based on the chart width and the canvas width specifically includes: Obtaining the width difference between the chart width and the canvas width; If the width difference is greater than a preset width threshold, taking the midpoint position of the chart width as the layout center point position; If the width difference is less than the preset width threshold, taking the midpoint position of the canvas width as the layout center point position.

5. The adaptive layout method based on the fishbone diagram structure according to claim 1, wherein Determining the position of each main node according to the layout center point position, the preset main node step length, and the index value of each main node specifically includes: According to the abscissa X of the layout center point position o , the preset main node step length L 主 , and the index value D of each main node 主 , calculate the abscissa X of the position of each main node 主 , and its calculation formula is expressed as: X 主 = X o - D 主 × L 主 (1) Set the vertical coordinate Y of each main node position 主 to 0.

6. The adaptive layout method based on the fishbone diagram structure according to claim 5, wherein The determining the position of each child node according to the position of each main node, the index value of each child node, the preset branch step length, and the position mark of each child node specifically includes: According to the index value D of each child node 子 and the preset branch step length L 子 calculate the diagonal offset pL, and its calculation formula is expressed as: pL=(D 子 +1)×L 子 ÷ (2) Using the abscissa X of each main node position 主 and the diagonal offset pL to calculate the abscissa X of each sub-node position 子 , and its calculation formula is expressed as: X 子 = X 主 -pL(3) Based on the position markers of each child node and using the ordinate Y of each main node position 主 and the diagonal offset pL, the ordinate Y of each child node position is calculated 子 , and its calculation formula is expressed as: When the position of the child node is marked as even: Y 子 = Y 主 + pL(4) When the position marker of the child node is odd: Y 子 = Y 主 - pL(5).

7. An adaptive layout system based on a fishbone diagram structure, characterized in that, The system includes: A conversion module configured to perform conversion processing on the data to be processed to obtain a set of node data; A node processing module, configured to classify each piece of node data in the node data set based on a node identifier, so as to obtain a main node set and a sub-node set corresponding to each main node in the main node set; An adaptive adjustment module, configured to calculate a chart width according to the number of main nodes in the main node set and a preset main node step length, and determine a layout center point position based on the chart width and a canvas width; A layout calculation module, configured to traverse the main node set, and determine the position of each main node according to the layout center point position, the preset main node step length, and the index value of each main node; traverse the sub-node set of each main node, and determine the position of each sub-node according to the position of each main node, the index value of each sub-node, a preset branch step length, and the position mark of each sub-node; A visualization layout module, configured to generate a fishbone layout diagram based on the positions of each main node, the positions of each sub-node, and layout parameters, where the layout parameters include the preset main node step length and the preset branch step length.

8. The adaptive layout system based on the fishbone diagram structure according to claim 7, characterized in that The system further includes: A configuration module, configured to call a configuration function to obtain the layout parameters, where the layout parameters further include a node distribution direction, a branch card size, and a node size.

9. An electronic device, characterized in that, The electronic device includes a memory and a processor. When the processor executes a computer program stored in the memory, the steps in the adaptive layout method based on a fishbone diagram structure according to any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium, characterized in that, A computer program is stored on a computer-readable storage medium. When the computer program is executed by a processor, the steps in the adaptive layout method based on a fishbone diagram structure according to any one of claims 1 to 6 are implemented.

Images