Hierarchical diagram layout methods, electronic devices, storage media, and program products

Abstract

This application provides a hierarchical graph layout method, an electronic device, a storage medium, and a program product. The method includes: obtaining the hierarchical depth of each child node under a parent node; determining the position coordinates of each child node in the parent container based on the initial position of the parent node in a parent container and the hierarchical depth of each child node, the position coordinates including horizontal and vertical coordinates; constructing a subtree structure in the parent container according to the position coordinates; and dynamically adjusting the size of the parent container according to the subtree boundary of the subtree structure in the parent container until the parent container matches the subtree boundary. This method can improve the hierarchical graph layout effect.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of vehicles, and particularly relates to a hierarchical graph layout method, an electronic device, a storage medium and a program product. BACKGROUND

[0002] A hierarchical graph is a special type of graph in which nodes are arranged in multiple levels, and nodes between adjacent levels are connected. Hierarchical graph automatic layout is to automatically arrange nodes so that the structure relationship is clear and intuitive for users to understand.

[0003] At present, existing graph layout technology usually defines the size of a parent container in advance, and then automatically arranges nodes in the parent container to form a subtree in the parent container.

[0004] However, in this way of the prior art, the size of the parent container and the size of the subtree are prone to mismatch, resulting in poor layout effect. SUMMARY

[0005] The embodiments of the present application provide a hierarchical graph layout method, an electronic device, a storage medium and a program product to improve the layout effect of a hierarchical graph.

[0006] In a first aspect, the embodiments of the present application provide a hierarchical graph layout method, comprising:

[0007] obtaining the hierarchical depth of each child node under a parent node;

[0008] determining the position coordinates of each child node in a parent container based on the initial position of the parent node in the parent container and the hierarchical depth of each child node, the position coordinates including horizontal coordinates and vertical coordinates;

[0009] constructing a subtree structure in the parent container according to the position coordinates;

[0010] dynamically adjusting the size of the parent container according to the subtree boundary of the subtree structure in the parent container until the parent container matches the subtree boundary.

[0011] In a possible implementation, the obtaining of each child node under the parent node comprises:

[0012] constructing a child node pointer, a sibling node pointer, a parent node pointer and a subtree node pointer based on the relationship of each node in an initial hierarchical graph to be laid out;

[0013] expanding the initial hierarchical graph into a chain structure according to the child node pointer, the sibling node pointer, the parent node pointer and the subtree node pointer;

[0014] The chain structure is traversed to determine each child node under the parent node.

[0015] In a possible implementation, the position coordinates of each child node in the parent container are determined based on the initial position of the parent node in the parent container and the hierarchical depth of each child node, including:

[0016] If the number of child nodes is more than two, the vertical spacing between child nodes at different hierarchical levels is determined according to the hierarchical depth of each child node;

[0017] The vertical coordinates of each child node at different hierarchical levels are determined according to the initial vertical coordinate of the parent node and the vertical spacing;

[0018] The horizontal coordinates of each node at the same hierarchical level are determined according to the initial horizontal coordinate of the parent node and the preset horizontal spacing.

[0019] In a possible implementation, the position coordinates of each child node in the parent container are determined based on the initial position of the parent node in the parent container and the hierarchical depth of each child node, including:

[0020] If the number of child nodes is one, the initial horizontal coordinate of the parent node is determined as the horizontal coordinate of the child node;

[0021] The vertical coordinate of the child node is determined according to the initial vertical coordinate of the parent node and the vertical spacing.

[0022] In a possible implementation, the method further includes:

[0023] Obtaining size information of each child node, the size information being used to represent the space size required by the child node in the parent container;

[0024] Determining the node space required by each node in the parent container based on the size information of each node.

[0025] In a possible implementation, after the size of the parent container is dynamically adjusted, the method further includes:

[0026] Redetermining the parent node position coordinates based on the adjusted size;

[0027] Redetermining the child node position coordinates of each child node based on the parent node position coordinates;

[0028] Updating the position of the subtree structure in the parent container based on the child node position coordinates of each child node.

[0029] In a possible implementation, the updating of the position of the sub-tree structure in the parent container based on the position coordinates of each child node comprises:

[0030] determining a position offset required for the sub-tree structure to move to the central position of the parent container;

[0031] obtaining an origin point coordinate of a bounding box of the sub-tree structure;

[0032] translating the sub-tree structure to the central position of the parent container according to the position coordinates of each node in the sub-tree structure, the origin point coordinate and the position offset.

[0033] In a possible implementation, the method further comprises:

[0034] obtaining an initial center point of the parent container and a target center point of the parent container after size adjustment;

[0035] adjusting the position of the parent container after size adjustment until the target center point is consistent with the position of the initial center point.

[0036] In a second aspect, an embodiment of the present application provides a hierarchical diagram layout device, comprising:

[0037] a hierarchy obtaining module configured to obtain the hierarchy depth of each child node under a parent node;

[0038] a position layout module configured to determine the position coordinates of each child node in a parent container based on the initial position of the parent node in the parent container and the hierarchy depth of each child node, the position coordinates comprising a horizontal coordinate and a vertical coordinate;

[0039] a sub-tree constructing module configured to construct a sub-tree structure in the parent container according to the position coordinates;

[0040] a size adjusting module configured to dynamically adjust the size of the parent container according to the sub-tree boundary of the sub-tree structure in the parent container until the parent container matches the sub-tree boundary.

[0041] In a third aspect, an embodiment of the present application provides an electronic device, comprising a memory and a processor.

[0042] The memory stores computer execution instructions.

[0043] The processor executes the computer execution instructions stored in the memory, so that the processor performs the first aspect and / or various possible implementations of the first aspect.

[0044] Fourthly, embodiments of this application provide a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, are used to implement the first aspect and / or various possible implementations of the first aspect.

[0045] Fifthly, embodiments of this application provide a computer program product, including a computer program that, when executed by a processor, implements the first aspect and / or various possible implementations of the first aspect.

[0046] The hierarchical graph layout method, electronic device, storage medium, and program product provided in this application dynamically adjust the size of the parent container based on the boundary of the subtree structure after the subtree structure is constructed. This allows the parent container to adapt to the subtree structure, eliminating the need for users to manually adjust the size, thus improving layout efficiency and layout effect. Attached Figure Description

[0047] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0048] Figure 1 A flowchart illustrating the hierarchical diagram layout method provided in this application;

[0049] Figure 2 This is a schematic diagram of the subtree structure provided in an embodiment of this application;

[0050] Figure 3 This is a schematic diagram of container size adjustment provided in an embodiment of this application;

[0051] Figure 4 A flowchart for determining the node layout position provided in an embodiment of this application;

[0052] Figure 5 This is a schematic diagram of the container adaptive bidirectional linkage method provided in the embodiments of this application;

[0053] Figure 6 This is a schematic diagram illustrating the complete process of hierarchical diagram layout provided in the embodiments of this application;

[0054] Figure 7 A schematic diagram of the hierarchical diagram layout device provided in this application;

[0055] Figure 8 A schematic diagram of the structure of the electronic device provided in this application.

[0056] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0057] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0058] Automatic layout technology for hierarchical diagrams is widely used in scenarios that require dynamic display of tree structures, such as data visualization, organizational charts, flowcharts, software architecture diagrams, and knowledge graphs. For example: (1) Enterprise management system: used to display departmental hierarchy, reporting relationships, or project organizational structure; (2) Software development: used for code dependency analysis, visualization of module structure diagrams or component trees; (3) Data analysis: used to present decision trees, process logic, or data flow diagrams; (4) Education and scientific research: used to construct mind maps, academic paper citation relationship diagrams, etc.

[0059] In these scenarios, users typically need to dynamically adjust the layout to adapt to different levels of nested structures, while also requiring the layout to have visual harmony, efficient space utilization, and smooth interaction. However, existing technologies often suffer from layout chaos or cumbersome operations when dealing with complex nested structures due to issues such as fixed container sizes and a single layer spacing strategy, making it difficult to meet actual needs and resulting in poor hierarchy diagram layout effects.

[0060] To address the aforementioned issues, embodiments of this application provide a hierarchical graph layout method, electronic device, storage medium, and program product. These methods enable dynamic adaptation of container size, differentiated optimization of hierarchical spacing, bidirectional linkage adjustment between containers and subgraphs, and efficient space management of complex nested structures. This improves the automation level, visual effects, and space utilization of hierarchical graph layout, ultimately achieving the goal of enhancing layout effectiveness.

[0061] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0062] Figure 1This is a flowchart illustrating the hierarchical graph layout method provided in this application. This method can be deployed on electronic devices (such as computers and cloud servers), with the electronic device serving as the execution entity. Figure 1 As shown, the method includes the following steps:

[0063] Step 110: Obtain the hierarchy depth of each child node under the parent node.

[0064] Step 120: Based on the initial position of the parent node and the hierarchical depth of each child node, determine the position coordinates of each child node in the parent container corresponding to the parent node.

[0065] The position coordinates include horizontal and vertical coordinates.

[0066] Step 130: Based on the position coordinates, construct the subtree structure in the parent container.

[0067] Step 140: Dynamically adjust the size of the parent container according to the subtree boundary of the subtree structure in the parent container until the parent container matches the subtree boundary.

[0068] Regarding step 110 above, assume the parent node is a node at the Nth level, and the child node is a node connected to the parent node and at the (N+1)th level, where N is a positive integer. For example, if the parent node is a node at the first level, then the child node is a node at the second level, and the level depth of the child node is 1.

[0069] Regarding steps 120 and 130 above, there is a corresponding relationship between the parent container and the parent node, and a relationship between the parent node and the child node. The parent container is used as a visualization container to store these child nodes.

[0070] Additionally, the parent container is a visual container containing borders and a background, and its size affects the layout of child nodes, constraining the available space for child nodes.

[0071] The size of a traditional parent container needs to be predefined. If the space required by the subtree structure composed of child nodes is too large, the size of the parent container needs to be manually adjusted. It cannot automatically adapt to the actual space requirements of the subtree.

[0072] If the subtree is too large, the content will overflow the container boundary; if the subtree is too small, there will be a lot of blank space inside the container, which may cause users to repeatedly adjust the container size manually.

[0073] In this embodiment, the initial position of the parent node in the parent container includes an initial x-coordinate and an initial y-coordinate, represented by (X0, Y0). Additionally, the position coordinates of each child node can be determined based on the number of child nodes. If there is only one child node, its coordinates can be (X0, Y1).

[0074] In this embodiment, in order to improve the layout effect of the hierarchy diagram, the parent node can be located on the central axis of the parent container, and each child node is located on both sides of the central axis. The connection relationship between the parent node and the child nodes is established, thereby obtaining the subtree structure.

[0075] For example, Figure 2 This is a schematic diagram of the subtree structure provided in the embodiments of this application, such as... Figure 2 As shown, the constructed subtree structure includes parent nodes and child nodes, and the space required by the subtree structure exceeds that of the parent container.

[0076] Regarding step 140 above, when the space required by the subtree structure does not match that of the parent container, the boundary of the subtree structure can be determined first, and then the size of the parent container can be dynamically adjusted.

[0077] For example, Figure 3 This is a schematic diagram of container size adjustment provided in an embodiment of this application, such as... Figure 3 As shown above, in the above Figure 2 Based on this, the size of the parent container is increased to just accommodate the subtree structure.

[0078] Traditional graphical layout techniques mainly use tree layout algorithms like D3.js or the Dagre layout engine, which suffer from fixed container sizes. The size of the parent container usually needs to be predefined or manually adjusted, and it cannot automatically adapt to the actual space requirements of the subtree.

[0079] In this embodiment, after the subtree structure is constructed, the size of the parent container is dynamically adjusted based on the boundary of the subtree structure. This allows the parent container to adapt to the subtree structure, eliminating the need for users to manually adjust the size and improving layout efficiency and effect.

[0080] In actual hierarchical graph layout, it is necessary to traverse all nodes in the hierarchical graph to calculate their positions. However, when the hierarchy is deep or the number of nodes is large, node traversal carries the risk of stack overflow and incurs significant function call overhead. To address this issue, in some embodiments, a hybrid linked data structure can be pre-constructed to provide a stable and efficient foundation for node traversal. The specific steps are as follows:

[0081] Step 11: Based on the relationships between the nodes in the initial hierarchical diagram to be laid out, construct the pointers to child nodes, sibling nodes, parent nodes, and subtree nodes;

[0082] Step 12: Expand the initial hierarchical graph into a chain structure based on the child node pointers, sibling node pointers, parent node pointers, and subtree node pointers;

[0083] Step 13: Traverse the nodes of the chain structure to determine the child nodes under the parent node.

[0084] In this embodiment, considering that in practical applications, a single node may contain at least one of the following: child node pointer, sibling node pointer, parent node pointer, and subchain node pointer, the tree-like hierarchical graph can be converted into a flattened chain structure.

[0085] Among them, the child node pointer (child) points to the first child node of the node, the sibling node pointer (sibling) points to the next sibling node of the node, the parent node pointer (parent) points to the parent node of the node, and the subtree node pointer (subChain) points to the subtree containing the node.

[0086] In this embodiment, child node pointers and sibling node pointers can be used to expand the hierarchical graph of the tree structure into a linked structure using a depth-first approach. This allows for iterative traversal of the linked structure when visiting nodes, thus enabling traversal of the entire tree structure. This fundamentally avoids the stack overflow problem that may occur with traditional depth-first recursive traversal algorithms, making it suitable for handling large-scale nodes or deep hierarchical tree graphs.

[0087] The parent node pointer provides the ability to trace back from the child node to the parent node. During traversal, it supports both forward traversal from the root node to the leaf node and reverse query and adjustment from the leaf node to the root node, thereby enhancing the flexibility and efficiency of data operations during traversal.

[0088] Furthermore, for cases where subtrees exist, subtree pointers (subChain) allow managing the subtrees within the parent container as independent units. This makes operations on complex container nodes (such as moving, collapsing / expanding) more efficient and simpler, achieving logical isolation.

[0089] In this embodiment, a four-dimensional relationship chain is constructed using child node pointers, sibling node pointers, parent node pointers, and subtree node pointers. This supports non-recursive node traversal and subtree isolation management, avoiding the call stack overflow problem that may be caused by traditional depth-first recursive traversal algorithms, thus adapting to the processing of large-scale nodes or deep tree-level graphs.

[0090] In some embodiments, traditional graphic layout techniques may suffer from a lack of differentiation in layout hierarchy. Figure 4The flowchart for determining the node layout position provided in the embodiments of this application is as follows: Figure 4 As shown, it includes the following steps:

[0091] Step 410: If there are more than two child nodes, determine the vertical spacing between child nodes at different levels based on the level depth of each child node.

[0092] Step 420: Determine the vertical coordinates of each child node in different levels based on the initial vertical coordinates and vertical spacing of the parent node;

[0093] Step 430: Determine the horizontal coordinates of each node in the same level based on the initial horizontal coordinates of the parent node and the preset horizontal spacing.

[0094] Regarding step 410 above, the basic spacing (i.e., longitudinal spacing) in the main axis direction can be adjusted using the following formula: longitudinal spacing = 1 + depth * α, that is, the spacing increases proportionally (e.g., 50%) for each level of depth, in order to effectively adapt to branch structures at different depths.

[0095] Where α is the multiplication factor and depth is the hierarchical depth.

[0096] The main axis direction refers to the direction in which the subtree structure extends, that is, the direction in which the level depth increases.

[0097] For example, if the level depth of the third-level child node is 2, then the vertical spacing between the third-level child node and the second-level child node is 1 + 2 * 1.5.

[0098] The multiplication factor α can be adjusted according to the actual visual requirements of the hierarchical diagram layout and specific application scenarios to improve the flexibility and adaptability of the layout strategy.

[0099] In this embodiment, as the hierarchy depth increases, this "increasing spacing" effect provides ample display space for deep and complex subtrees, fundamentally avoiding the problem of crowded and difficult-to-identify connection lines between nodes.

[0100] Regarding step 420 above, taking the initial vertical coordinate of the parent node as Y0 as an example, the vertical distance between the first-level child node and the parent node is Y, then the vertical coordinate of the first-level child node = Y + Y0.

[0101] Regarding step 430 above, the spacing (i.e., horizontal spacing) between nodes at the same level remains constant. For example, a preset horizontal spacing can be set as the spacing between nodes at the same level. This ensures visual consistency and neatness of the node arrangement within the same level while forming a clear hierarchy, avoiding an overly loose layout.

[0102] For example, taking the initial y-coordinate of the parent node as X0, assuming there are two child nodes, these two child nodes can be arranged on both sides of the parent node, and there is a vertical distance between these two child nodes and the parent node.

[0103] With a preset horizontal spacing of X, the horizontal coordinate of one child node located to the left of the parent node is X1=X0-X; while the horizontal coordinate of the other child node located to the right of the parent node is X2=X0+X.

[0104] In this embodiment, for cases with multiple (i.e., more than two) child nodes, the total length of all child nodes and their spacing on the horizontal axis is first calculated. Then, using the center of the parent node as a reference, the child nodes are symmetrically distributed to both sides to calculate the precise offset of the current child node. Finally, combined with the fixed vertical spacing on the vertical axis, the final coordinates of the child node are returned.

[0105] The node layout method provided in this application embodiment realizes hierarchical differentiated layout. The top-level nodes of the hierarchical diagram will be laid out relatively compactly, while the deeper nodes will be more spacious. Regardless of how the depth and width of the hierarchical diagram of the tree structure change, a node layout with reasonable proportions and clear distinction can be automatically generated without the need for manual adjustment for a specific tree shape, thereby improving the automation level and reliability of the visualization process.

[0106] Furthermore, in some embodiments, if the number of child nodes is one, the initial horizontal coordinate of the parent node is determined as the horizontal coordinate of the child node; then, the vertical coordinate of the child node is determined based on the initial vertical coordinate of the parent node and the vertical spacing.

[0107] In this embodiment, when the hierarchical diagram of the tree structure has only one child node, the hierarchy depth of that node is 0, that is, it has only one core root node and its direct child nodes (top-level structure). Based on this, using a compact spacing close to the base value for layout helps to focus the visual attention on the core trunk and highlight key information and main structure.

[0108] In this embodiment, if there is only one child node, the child node is placed directly at the center of the parent node's main axis (i.e., the initial horizontal coordinate of the parent node is aligned with the horizontal coordinate of the child node). This allows for quick completion of the hierarchical diagram layout, improves layout efficiency, and ensures that the visual focus is concentrated on the core trunk, highlighting key information and the main structure.

[0109] In this embodiment, for the case of a single child node, the position of the child node can be directly set to be below the center (i.e., the zero point position) of the parent node. This processing not only simplifies the calculation, but also conforms to the intuitive aesthetic expectation of "the unique element is centered", and ensures the completeness of the logic.

[0110] Traditional layout algorithms use a uniform spacing strategy for all levels, which cannot automatically optimize the visual hierarchy based on the level depth. This results in top-level nodes being too sparse, wasting screen space, while deep-level nodes are too dense, affecting readability.

[0111] The above embodiments utilize the initial position of the parent node in the parent container and the hierarchical depth of each child node to adjust the position coordinates of each child node in the parent container, thereby achieving differentiation in the hierarchical spacing and improving the layout effect of the hierarchical diagram.

[0112] In addition, in some embodiments, each child node also needs to occupy container space. Therefore, before laying out each child node, the size information of each child node can be obtained; then, based on the size information of each node, the node space required by each node in the parent container can be determined. In this way, when laying out child nodes, the node space required by each child node can be fully considered, avoiding unreasonable layout.

[0113] The size information is used to characterize the amount of space that a child node needs to occupy in the parent container.

[0114] In this embodiment, by measuring the size of child nodes in real time, the actual rendering effect after the hierarchical diagram layout is completed can be ensured. This avoids the problem that traditional layout methods can easily lead to inconsistencies between the styles of Cascading Style Sheets (CSS) and the final rendering, thus ensuring pixel-level accurate layout.

[0115] Among them, a reserved string parsing interface is used to flexibly adapt child nodes to various data source types such as CSS and configuration files.

[0116] Additionally, when child node size data is missing, a default value of 150×40 can be automatically used. This ensures that a reasonable layout result is still output even in edge cases, maintaining stability.

[0117] In this embodiment, the layout of the tree structure hierarchy does not use preset or fixed node sizes. Instead, the actual width and height of each child node are obtained in real time at runtime. This ensures that regardless of whether the node content is a simple text label or a complex component containing icons, the layout calculation can be accurately performed based on its actual physical space. This guarantees the accuracy and flexibility of the layout, perfectly adapting to application scenarios with variable content.

[0118] In this embodiment, to prevent visual crowding and information clutter, a minimum safe spacing of no less than 30 pixels is maintained between all adjacent nodes (including sibling nodes and parent-child nodes). This provides clear visual separation, ensuring readability, without wasting space, fundamentally eliminating the problems of node overlap or excessively close spacing, and improving the overall cleanliness of the layout.

[0119] Furthermore, addressing the issue that traditional layout algorithms primarily employ hierarchical graph layout, where child node positions are calculated based on parent node positions, but child nodes cannot automatically reposition after parent node positions are adjusted, lacking a feedback mechanism of "container size expansion → child node re-centering," leading to inconsistencies in the spatial relationship between the container and its content, some embodiments provide a child node position update method, which includes:

[0120] Step 21: Based on the adjusted dimensions, redetermine the coordinates of the parent node's position;

[0121] Step 22: Based on the parent node's position coordinates, redetermine the position coordinates of each child node's child nodes;

[0122] Step 23: Update the subtree structure based on the coordinates of each child node's position.

[0123] In this embodiment, when adjusting the size of the parent container, the overall bounding box of the subtree structure formed by all child nodes is first calculated. Then, the new size of the parent container is calculated based on the size of this bounding box plus the inner margin, and a minimum width and height constraint is applied.

[0124] Regarding step 21 above, when the size and position of the parent container change, the coordinates of the corresponding parent node also need to be updated to ensure that the parent node can be on the central axis of the parent container.

[0125] Among them, the change in the size of the parent container can refer to a change in the length and / or width of the parent container, while the change in the position of the parent container can refer to a translation of the parent container in the left, right, up, or down directions.

[0126] Regarding step 22 above, after redetermining the position coordinates of the parent node, the position coordinates of each child node in the parent container can be redetermined based on the new position coordinates and the hierarchical depth of each child node. For details, please refer to the process of determining the position coordinates of each child node in the parent container mentioned above.

[0127] Regarding step 23 above, the position of each child node can be adjusted in the parent container according to the position coordinates of each child node.

[0128] Furthermore, in some embodiments, the positions of each child node can be adjusted through the following steps:

[0129] Step 31: Determine the position offset required for the subtree structure to move to the center position of the parent container;

[0130] Step 32: Obtain the origin coordinates of the bounding box of the subtree structure;

[0131] Step 33: Based on the position coordinates, origin coordinates, and position offset of each node in the subtree structure, translate the subtree structure to the center position of the parent container.

[0132] In this embodiment, the overall bounding box formed by all child nodes is first obtained. Then, the offset required to achieve horizontal and vertical centering (i.e., offset to the center position of the parent container) within the parent container is calculated. Next, each child node is traversed, and its position is uniformly translated by a vector.

[0133] The translation operation consists of two steps: first, subtract the origin coordinates of the bounding box, which is equivalent to normalizing the entire child node group to the origin; then, add the center offset to translate it to the center of the parent container.

[0134] In this embodiment, the center point of the parent node (the node has the dimensional characteristics of length and width, and is regarded as the relative zero point in the calculation) is used as the reference. All child nodes are regarded as a whole. By calculating the total width of the whole (including the node spacing), and making it horizontally and vertically centered within the parent container, the child node group is perfectly symmetrically distributed on both sides of the center line of the parent node, thus achieving visual balance.

[0135] The child node position adjustment method provided in this embodiment avoids calculating the center position of each child node one by one. The algorithm is simple and efficient and can be used to perform final center alignment and beautification of the entire subtree structure after the automatic layout is completed.

[0136] For example, Figure 5 This is a schematic diagram of the container adaptive bidirectional linkage method provided in the embodiments of this application, as shown below. Figure 5 As shown, it includes the following steps:

[0137] Step 510: The child nodes are laid out based on the initial position of the parent node;

[0138] Step 520: Calculate the subtree boundaries and adjust the size and position of the parent container;

[0139] Step 530: Based on the new parent container size, recalculate the child node positions to center-align the subtree structure.

[0140] In this embodiment, the layout process of child nodes is a two-way dialogue, meaning that the size and position of the container affect the layout of child nodes, while the overall boundary of the child nodes in turn determines the final size of the container. This two-way calculation ensures that the container and content fit perfectly.

[0141] In the two-way dialogue process, child nodes at the same depth level are laid out using an equidistant distribution principle, ensuring a constant spacing between any two adjacent child nodes. This is achieved by evenly distributing the total spacing among all child nodes. Regardless of the number of child nodes, the spacing between them remains consistent, forming a clear and orderly visual flow and effectively improving readability.

[0142] The specific principles behind child node layout are as follows:

[0143] Let the center of the parent node be the origin (0, 0), and the n child nodes be evenly distributed with a gap between them; the position of a child node = starting offset + index × gap = -[(n-1)×gap] / 2 + i×gap = gap×[i-(n-1) / 2].

[0144] In the above formula, i is the index, numbered starting from 0.

[0145] For example, when n=3:

[0146] Child node 0: gap × [-1] (i.e., located to the left of the parent node)

[0147] Child node 1: gap×[0] (i.e., located on the vertical axis where the center of the parent node is located)

[0148] Child node 2: gap×[1] (i.e., located to the right of the parent node)

[0149] In addition, in some embodiments, the container has a minimum size constraint (400 pixels wide and 300 pixels high) to prevent the layout from being too small, and this constraint has no fixed upper limit. The container can adapt to the expansion of content, balancing the aesthetics and flexibility of the hierarchy diagram layout.

[0150] The child node position update method provided in this application establishes a two-way feedback mechanism between the parent container and the subtree structure. Specifically, when the container size changes, its internal subtree structure can automatically recenter; furthermore, changes in the subtree structure's size can trigger the container's adaptive adjustment. This overcomes the limitations of traditional unidirectional layouts, ensuring that the spatial relationship between the container and its content remains consistent and harmonious.

[0151] Furthermore, in some embodiments, when the size of the parent container changes, its position coordinates need to be adjusted in reverse to ensure that the position of the center point of the parent container remains unchanged from before the adjustment, so as to improve the layout effect of the hierarchy diagram. The specific implementation steps are as follows:

[0152] Step 41: Obtain the initial center point of the parent container and the target center point of the parent container after size adjustment;

[0153] Step 42: Adjust the position of the parent container after size adjustment until the target center point is consistent with the initial center point.

[0154] In this embodiment, when the size of the parent container is adjusted, in order to ensure that the visual center point of the parent container on the screen remains unchanged, the position of the parent container is adjusted by automatically compensating for position offset. This can effectively avoid the "visual jump" caused by size scaling and provide users with a stable and smooth interactive experience.

[0155] In this way, when the position of the parent container is adjusted, the position of the subtree structure in the container will also change accordingly. This ensures that the border of the subtree structure will not exceed the container, and ensures that the spatial relationship between the container and the content is always coordinated and consistent.

[0156] Figure 6 This is a schematic diagram illustrating the complete process of hierarchical diagram layout provided in the embodiments of this application, such as... Figure 6 As shown, it includes the following steps: Step 601, find the root node; Step 602, create a chain structure; Step 603, obtain the list of child nodes; Step 604, calculate the spacing between different levels based on depth; Step 605, process the subtrees within the container; Step 606, recursively create child chains, depth+1; Step 607, adjust the container size; Step 608, re-center the child nodes; Step 609, obtain the out-degree nodes; Step 610, calculate the optimal spacing; Step 611, calculate the symmetrical positions of child nodes; Step 612, recursively create child chains, depth=0+creating sibling chains; Step 613, traverse the linked list to collect all nodes; Step 614, return the laid-out node array.

[0157] Here, depth represents the level depth of the child node, and the sibling chain is the chain of sibling nodes used to point to the next sibling node.

[0158] In addition, by managing the subtrees inside the container as independent units through subchain node pointers, precise boundary calculations and space management can be performed, avoiding layout errors when dealing with complex nested structures and ensuring layout stability in complex scenarios.

[0159] Traditional methods often require manually setting the canvas or container size. In this embodiment, however, the size of the parent container can be dynamically adjusted according to the actual space requirements of its internal subtree structure, without pre-definition or manual intervention. This achieves adaptive expansion of the container size and a perfect fit between the content and the container. Users can obtain an optimal view without scrollbars or extra blank space without dragging or parameter adjustments, greatly improving operational efficiency.

[0160] In addition, this embodiment adopts a hierarchical differential spacing strategy, which automatically applies corresponding spacing between child nodes at different levels according to the hierarchical depth of the tree structure, instead of using a uniform spacing for all levels. This optimizes screen space utilization and visual hierarchy, prevents the top level from being too sparse and the deeper levels from being too dense, improves readability, and ensures that the overall layout remains balanced, harmonious, and readable regardless of the complexity of the tree structure.

[0161] During the layout process, child nodes are evenly and symmetrically distributed below the parent node, centered on it. This ensures that the automatically laid-out hierarchy diagram conforms to aesthetic principles, making the entire tree structure appear very balanced and stable. This facilitates quick understanding of the primary and secondary relationships within the tree structure, enhancing the professionalism and aesthetics of the chart. Furthermore, through clear horizontal alignment and consistent hierarchical spacing, nodes at different levels are clearly defined on different visual planes, making organizational reporting lines, data inheritance relationships, and workflows readily apparent, reducing cognitive load and allowing users to quickly trace paths and understand the overall architecture.

[0162] In particular, when laying out child nodes, the vertical spacing is dynamically calculated by utilizing the hierarchy depth of child nodes, while configuring reasonable preset horizontal spacing, which can improve space utilization. While ensuring minimum safe gaps, the child nodes are arranged as compactly as possible, avoiding unnecessary blank areas, thus displaying more information within the limited screen space and improving information density and browsing efficiency.

[0163] Furthermore, when laying out a hierarchy diagram, which resembles a tree structure, it can extend vertically downwards or horizontally to the left or right. Users can choose a top-down vertical layout or a left-to-right horizontal layout (suitable for organizational charts or timelines) to improve the versatility of hierarchy diagram layouts in various application scenarios.

[0164] Figure 7 This is a schematic diagram of the hierarchical diagram layout device provided in this application, which can be integrated into an electronic device. Figure 7 As shown, the hierarchical diagram layout device 70 provided in this embodiment includes:

[0165] The hierarchy acquisition module 701 is used to obtain the hierarchy depth of each child node under the parent node;

[0166] The position layout module 702 is used to determine the position coordinates of each child node in the parent container based on the initial position of the parent node in the parent container and the hierarchical depth of each child node.

[0167] The position coordinates include horizontal coordinates and vertical coordinates.

[0168] Subtree building module 703 is used to build a subtree structure in the parent container based on position coordinates.

[0169] The size adjustment module 704 is used to dynamically adjust the size of the parent container according to the subtree boundary of the subtree structure in the parent container until the parent container matches the subtree boundary.

[0170] In one possible implementation, the hierarchy acquisition module 701 can be used to: construct child node pointers, sibling node pointers, parent node pointers, and subtree node pointers based on the relationships between the nodes in the initial hierarchy diagram to be laid out; then expand the initial hierarchy diagram into a chain structure based on the child node pointers, sibling node pointers, parent node pointers, and subtree node pointers; and perform node traversal on the chain structure to determine each child node under the parent node.

[0171] In one possible implementation, the position layout module 702 can be used to: if the number of child nodes is two or more, determine the vertical spacing between child nodes at different levels according to the hierarchical depth of each child node; determine the vertical coordinates of each child node at different levels according to the initial vertical coordinates and vertical spacing of the parent node; and determine the horizontal coordinates of each node at the same level according to the initial horizontal coordinates and preset horizontal spacing of the parent node.

[0172] In one possible implementation, the position layout module 702 can be used to: if the number of child nodes is one, determine the initial horizontal coordinate of the parent node as the horizontal coordinate of the child node; and then determine the vertical coordinate of the child node based on the initial vertical coordinate of the parent node and the vertical spacing.

[0173] In one possible implementation, the hierarchical graph layout apparatus further includes: a space determination module, used to obtain the size information of each child node; and to determine the node space required by each node in the parent container based on the size information of each node. The size information is used to characterize the amount of space required by the child node in the parent container.

[0174] In one possible implementation, the hierarchical graph layout apparatus further includes: a container position update module, used to redetermine the position coordinates of the parent node based on the adjusted size; redetermine the position coordinates of the child nodes of each child node based on the position coordinates of the parent node; and update the position of the subtree structure in the parent container based on the position coordinates of the child nodes of each child node.

[0175] In one possible implementation, the container position update module is further configured to: determine the position offset required for the subtree structure to move to the center position of the parent container; obtain the origin coordinates of the bounding box of the subtree structure; and translate the subtree structure to the center position of the parent container based on the position coordinates, origin coordinates and position offset of each node in the subtree structure.

[0176] In one possible implementation, the hierarchy diagram layout apparatus further includes: a center alignment module, used to obtain the initial center point of the parent container and the target center point of the parent container after size adjustment; and to adjust the position of the parent container after size adjustment until the target center point is consistent with the position of the initial center point.

[0177] The hierarchical diagram layout device provided in this embodiment can execute the method provided in the above method embodiment. Its implementation principle and technical effect are similar, and will not be described in detail here.

[0178] Figure 8 A schematic diagram of the structure of the electronic device provided in this application. Figure 8 As shown, the electronic device 80 provided in this embodiment includes at least one processor 801 and a memory 802. Optionally, the device 80 further includes a communication component 803. The processor 801, memory 802, and communication component 803 are connected via a bus 804.

[0179] In a specific implementation, at least one processor 801 executes computer execution instructions stored in memory 802, causing at least one processor 801 to perform the above-described method.

[0180] The specific implementation process of processor 801 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.

[0181] In the above embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.

[0182] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.

[0183] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0184] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the above-described method.

[0185] This application also provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a processor, implement the above-described method.

[0186] The aforementioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk. The readable storage medium can be any available medium accessible to a general-purpose or special-purpose computer.

[0187] An exemplary readable storage medium is coupled to a processor, enabling the processor to read information from and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can reside in an Application Specific Integrated Circuit (ASIC). Alternatively, the processor and the readable storage medium can exist as discrete components in the device.

[0188] The division of units is merely a logical functional division; in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be indirect coupling or communication connection through some interfaces, devices, or units, and may be electrical, mechanical, or other forms.

[0189] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0190] In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0191] If a function is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, or the part that contributes to the prior art, or a part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0192] Those skilled in the art will understand that all or part of the steps of the above-described method embodiments can be implemented by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When executed, the program performs the steps of the above-described method embodiments; and the aforementioned storage medium includes various media capable of storing program code, such as ROM, RAM, magnetic disks, or optical disks.

[0193] Finally, it should be noted that other embodiments of the invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This invention is intended to cover any variations, uses, or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art not disclosed herein, and is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of the invention is limited only by the appended claims.

Claims

1. A hierarchical diagram layout method, characterized in that, include: Get the hierarchy depth of each child node under the parent node; Based on the initial position of the parent node in the parent container and the hierarchical depth of each child node, the position coordinates of each child node in the parent container are determined, including horizontal coordinates and vertical coordinates. Based on the location coordinates, construct a subtree structure within the parent container; The size of the parent container is dynamically adjusted according to the subtree boundary of the subtree structure in the parent container until the parent container matches the subtree boundary.

2. The method according to claim 1, characterized in that, The process of obtaining each child node under the parent node includes: Based on the relationships between the nodes in the initial hierarchical graph to be laid out, construct pointers to child nodes, sibling nodes, parent nodes, and subtree nodes. Based on the child node pointers, sibling node pointers, parent node pointers, and subtree node pointers, the initial hierarchical graph is expanded into a chain structure; The chain structure is traversed to determine each child node under the parent node.

3. The method according to claim 1, characterized in that, The step of determining the position coordinates of each child node in the parent container based on the initial position of the parent node in the parent container and the hierarchical depth of each child node includes: If the number of child nodes is two or more, the vertical spacing between child nodes at different levels is determined according to the level depth of each child node. Based on the initial vertical coordinates of the parent node and the vertical spacing, determine the vertical coordinates of each child node in different levels; Based on the initial horizontal coordinates of the parent node and the preset horizontal spacing, determine the horizontal coordinates of each node in the same level.

4. The method according to claim 1, characterized in that, The step of determining the position coordinates of each child node in the parent container based on the initial position of the parent node in the parent container and the hierarchical depth of each child node includes: If the number of child nodes is one, then the initial horizontal coordinate of the parent node is determined as the horizontal coordinate of the child node; The vertical coordinates of the child nodes are determined based on the initial vertical coordinates and vertical spacing of the parent node.

5. The method according to claim 3 or 4, characterized in that, The method further includes: Obtain the size information of each child node, which is used to characterize the space required by the child node in the parent container; Based on the size information of each node, determine the node space that each node needs to occupy in the parent container.

6. The method according to claim 1, characterized in that, After dynamically adjusting the size of the parent container, the method further includes: Based on the adjusted dimensions, redetermine the coordinates of the parent node's position. Based on the parent node's position coordinates, the position coordinates of each child node are redefined. The position of the subtree structure within the parent container is updated based on the position coordinates of each child node.

7. The method according to claim 6, characterized in that, Updating the position of the subtree structure within the parent container based on the coordinates of each child node's position includes: Determine the position offset required for the subtree structure to move to the center position of the parent container; Obtain the origin coordinates of the bounding box of the subtree structure; Based on the position coordinates of each node in the subtree structure, the origin coordinates, and the position offset, the subtree structure is translated to the center position of the parent container.

8. The method according to claim 1, characterized in that, The method further includes: Obtain the initial center point of the parent container and the target center point of the parent container after size adjustment; The position of the parent container after the size adjustment is adjusted until the target center point is in the same position as the initial center point.

9. A hierarchical diagram layout device, characterized in that, include: The hierarchy retrieval module is used to obtain the hierarchy depth of each child node under the parent node; The position layout module is used to determine the position coordinates of each child node in the parent container based on the initial position of the parent node in the parent container and the hierarchical depth of each child node. The position coordinates include horizontal coordinates and vertical coordinates. A subtree construction module is used to construct a subtree structure in the parent container based on the position coordinates; The size adjustment module is used to dynamically adjust the size of the parent container according to the subtree boundary of the subtree structure in the parent container until the parent container matches the subtree boundary.

10. An electronic device, characterized in that, include: Memory, processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory, causing the processor to perform the method as described in any one of claims 1-8.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1-8.

12. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method described in any one of claims 1-8.

Images