Graphical display method and device

Abstract

The invention discloses a graphical display method and device. The method comprises the following steps: when an interactive operation of a master node is detected, the computer equipment obtains a plurality of slave nodes associated with the master node; and displaying the plurality of slave nodes and the flexible body graph surrounding the plurality of slave nodes. Wherein the flexible body graph is in an irregular shape, and the boundary of the flexible body graph is arranged along the boundary of the slave node on the outer side in the plurality of slave nodes. When a graph surrounding the slave nodes is displayed, regular graphs such as a circle or a rectangle are not adopted any more, an irregular flexible graph is adopted, the boundary of the flexible graph is arranged along the boundary of the slave nodes on the outer side in the multiple slave nodes, the irregular boundary can better fit and wrap internal node distribution, the space utilization rate is increased, and the space utilization rate is increased. The design that the flexible body graph is attached to the node distribution can avoid the over-crowded or scattered layout problem, and the layout screen-effect ratio is improved. The envelope graph is no longer a node with a larger radius, and the boundary of the flexible graph is set based on the boundary of the internal node, so that the overall visual aesthetic degree is high.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of graphical display, in particular to a graphical display method and device. BACKGROUND

[0002] In the field of graphical display, when the scale of a graph to be displayed is large (i.e. the number of nodes contained in the graph is large), the graph can be grouped and enveloped to realize the ordered layout of the nodes.

[0003] The related technology provides a graphical display scheme based on grouping and enveloping. The scheme divides the slave nodes related to the master node into a group, and the slave nodes in the group are enveloped by a circular or rectangular graph when displayed. The user clicks the master node, and the group of slave nodes and the enveloping graph are displayed at the same time, thereby realizing the ordered layout of the nodes. SUMMARY

[0004] The present application provides a graphical display method and device, which can improve the space utilization of graphical display.

[0005] In a first aspect, the present application provides a graphical display method. The graphical display method can be executed by a computer device, and the method comprises the following steps: when an interaction operation of a master node is detected, the computer device acquires a plurality of slave nodes associated with the master node; and the plurality of slave nodes and a soft body graph surrounding the plurality of slave nodes are displayed. The soft body graph is an irregular shape, and the boundary of the soft body graph is arranged along the boundary of an outer slave node in the plurality of slave nodes.

[0006] Among the plurality of slave nodes, the outer slave node refers to a slave node that is farthest from the center of the soft body graph in each direction, i.e. a slave node at the edge in each direction.

[0007] The boundary of the soft body graph is arranged along the boundary of the outer slave node in the plurality of slave nodes, so that the contour of the soft body graph can completely surround the boundary of the plurality of slave nodes on one hand, and on the other hand, the contour of the soft body graph is not too large, resulting in too many gaps in the soft body graph.

[0008] In the implementation manner of the present application, when the graph surrounding the slave nodes is displayed, a regular graph such as a circle or a rectangle is no longer used, but an irregular soft body graph is used. The boundary of the soft body graph is arranged along the boundary of the outer slave node in the plurality of slave nodes. The irregular boundary can better fit and wrap the internal node distribution, improve the space utilization, and the design of the soft body graph fitting the node distribution can avoid the problems of too crowded or scattered layout, thereby improving the layout screen efficiency ratio. At the same time, the enveloping graph is no longer a node with a larger radius. The boundary of the soft body graph is arranged based on the boundary of the internal node, and the overall visual aesthetic degree is high.

[0009] In some possible implementation manners of the present application, displaying the plurality of slave nodes and the soft body graphics surrounding the plurality of slave nodes comprises:

[0010] Based on the initial positions of the plurality of slave nodes, displaying the plurality of slave nodes and the soft body graphics of the plurality of slave nodes;

[0011] Based on the combined inflation force of the plurality of slave nodes, iteratively updating the positions of the plurality of slave nodes;

[0012] Based on the updated positions of the plurality of slave nodes, displaying the plurality of slave nodes and the soft body graphics of the plurality of slave nodes.

[0013] In this implementation manner, the positions of the slave nodes are updated through multiple iterations, and the slave nodes and the soft body graphics are displayed based on the updated positions, so that the layout within the soft body graphics is optimized, the balance of the layout is ensured, the visual comfort is improved, and the soft body graphics boundary is dynamically adjusted according to the positions of the nodes. Meanwhile, the shape of the soft body graphics is iteratively updated, compared with the related art in which only the position of the envelope graphics is updated and the shape is fixed, so that the display animation effect of the soft body graphics provided in the present application is better, and the problem of poor animation effect in the related art is avoided.

[0014] In this implementation manner, the initial positions of the slave nodes can be preset. For example, the plurality of slave nodes are uniformly distributed around the master node; for another example, the plurality of slave nodes are randomly distributed within a certain range of the master node.

[0015] In this implementation manner, the combined inflation force of the slave nodes includes a charge force, an edge force, and a center force. The charge force refers to the mutual repulsive force between any two nodes in the same group of slave nodes. The edge force refers to the force between two nodes having an edge (for example, the edge between the master node and the slave node) in the same group of slave nodes. The center force refers to the force that the node receives towards the center of the group of slave nodes.

[0016] In some possible implementation manners of the present application, based on the updated positions of the plurality of slave nodes, displaying the plurality of slave nodes and the soft body graphics of the plurality of slave nodes comprises:

[0017] Based on the positions of the plurality of slave nodes, displaying the plurality of slave nodes and the soft body graphics of the plurality of slave nodes every time the set number of iteration updates is reached.

[0018] Through the above implementation manners, the change of the soft body graphics is more coherent, and the animation effect is more smooth.

[0019] In an example, the computer device can update the positions of the slave nodes once every iteration, and display the plurality of slave nodes and the soft body graphics of the plurality of slave nodes based on the positions.

[0020] In another example, the computer device can update the position of the slave nodes once every multiple iterations (e.g., 5 times), and display the plurality of slave nodes and the soft body graphics based on the position.

[0021] In some possible implementations of the present application, the display of the plurality of slave nodes and the soft body graphics includes:

[0022] determining a plurality of virtual auxiliary points for each slave node, the plurality of virtual auxiliary points being distributed around the corresponding slave node;

[0023] determining boundary points of the soft body graphics based on the plurality of virtual auxiliary points of each slave node;

[0024] forming smooth lines based on the boundary points of the soft body graphics to obtain the soft body graphics.

[0025] In this implementation, the boundary points of the soft body graphics are determined by setting the virtual auxiliary points, and the smooth lines are formed based on the boundary points of the soft body graphics to obtain the soft body graphics. This approach can ensure the space utilization within the soft body graphics and make the soft body graphics more visually appealing.

[0026] For example, the plurality of virtual auxiliary points of the slave node are equidistant from the center of the slave node, and the plurality of virtual auxiliary points of the slave node are equidistantly arranged.

[0027] Optionally, the method further includes:

[0028] In the case of overlap between two soft body graphics, the two soft body graphics and the slave nodes in the two soft body graphics are re-displayed.

[0029] Alternatively, in the case of overlap between the soft body graphics and a single node, the soft body graphics, the slave nodes in the soft body graphics, and the single node that does not belong to any soft body graphics are re-displayed.

[0030] In this implementation, when there is overlap between the soft body graphics (or overlap between the soft body graphics and a single node), i.e., there is squeezing between the soft body graphics, the soft body graphics are redrawn and the internal slave node positions are re-displayed to ensure the spatial independence between the soft body graphics, prevent the overlap between the soft body graphics, and maintain the overall coordination and aesthetics of the layout.

[0031] In some possible implementations of the present application, the re-displaying of the two soft body graphics and the slave nodes in the two soft body graphics includes:

[0032] determining the center of mass positions of the two soft body graphics based on the repulsive force of the soft body graphics;

[0033] determining the slave node positions within the two soft body graphics based on the center of mass positions of the soft body graphics and the attractive force of the nodes within the soft body graphics;

[0034] display the two soft graphics and the slave nodes in the two soft graphics based on the slave node positions within the two soft graphics.

[0035] In this implementation, by determining the positions of the soft graphics first, then determining the slave node positions, and then displaying the soft graphics and the slave nodes, both the squeezing between the soft graphics and the more reasonable layout of the re-displayed soft graphics and the slave nodes are ensured.

[0036] Optionally, the method further includes:

[0037] determining the distance between the two soft graphics;

[0038] determining whether the two soft graphics exist in the overlapping condition based on the distance between the two soft graphics.

[0039] In this implementation, by determining the distance between the soft graphics, whether the soft graphics exist in the overlapping condition is determined, so that the soft graphics can be separated in time when the squeezing between the soft graphics exists.

[0040] Exemplarily, when the distance between the two soft graphics is greater than a distance threshold, it is determined that the two soft graphics do not exist in the overlapping condition. When the distance between the two soft graphics is not greater than the distance threshold, it is determined that the two soft graphics exist in the overlapping condition.

[0041] In a second aspect, the present application provides a graphical display device, which includes:

[0042] an acquisition unit configured to acquire a plurality of slave nodes associated with a master node in response to an interactive operation acting on the master node;

[0043] a display unit configured to display the plurality of slave nodes and a soft graphic surrounding the plurality of slave nodes, the soft graphic being irregularly shaped, and a boundary of the soft graphic being arranged along a boundary of an outer slave node in the plurality of slave nodes.

[0044] Exemplarily, the display unit is configured to display the plurality of slave nodes and the soft graphic of the plurality of slave nodes based on initial positions of the plurality of slave nodes, iteratively update the positions of the plurality of slave nodes based on a combined inflation force of the plurality of slave nodes, and display the plurality of slave nodes and the soft graphic of the plurality of slave nodes based on the updated positions of the plurality of slave nodes.

[0045] Exemplarily, the display unit is configured to display the plurality of slave nodes and the soft graphic of the plurality of slave nodes based on the positions of the plurality of slave nodes every time a set number of iteration updates is reached.

[0046] The display unit is configured to determine a plurality of virtual auxiliary points of each slave node, the plurality of virtual auxiliary points being distributed around the corresponding slave node; determine boundary points of the soft body graphics based on the plurality of virtual auxiliary points of each slave node; and form smooth lines based on the boundary points of the soft body graphics to obtain the soft body graphics.

[0047] Optionally, the display unit is further configured to, in a case where the two soft body graphics overlap, display the two soft body graphics and the slave nodes in the two soft body graphics again.

[0048] Alternatively, in a case where the soft body graphics overlap with the single node, the display unit is further configured to display the soft body graphics, the slave nodes in the soft body graphics and the single node again, the single node not belonging to any soft body graphics.

[0049] Optionally, the display unit is configured to determine the center of mass positions of the two soft body graphics based on repulsive forces of the soft body graphics; determine the slave node positions in the two soft body graphics based on the center of mass positions of the soft body graphics and attractive forces of the nodes in the soft body graphics; and display the two soft body graphics and the slave nodes in the two soft body graphics based on the slave node positions in the two soft body graphics.

[0050] Optionally, the display unit is further configured to determine the distance between the two soft body graphics; and determine whether the two soft body graphics overlap based on the distance between the two soft body graphics.

[0051] In a third aspect, a computer device is provided. The computer device includes a processor and a memory. The memory is configured to store a software program and a module. The processor implements the method in the first aspect or any possible implementation of the first aspect by running or executing the software program and / or the module stored in the memory.

[0052] Optionally, the processor is one or more, and the memory is one or more.

[0053] Optionally, the memory can be integrated with the processor, or the memory and the processor are separately arranged.

[0054] In a specific implementation process, the memory can be a non-transitory memory, for example, a read only memory (ROM), which can be integrated on the same chip with the processor, or arranged on different chips respectively, and the type of the memory and the arrangement manner of the memory and the processor are not limited in the present application.

[0055] In a fourth aspect, a computer program product is provided. The computer program product includes computer program codes, which, when executed by a device, cause the device to perform the method in the first aspect or any possible implementation of the first aspect.

[0056] In a fifth aspect, a computer readable storage medium is provided. The computer readable storage medium stores program codes executed by a processor, and the program codes include codes for implementing the method in any possible implementation of the first aspect.

[0057] In a sixth aspect, a chip is provided. The chip includes a processor configured to invoke and execute instructions stored in a memory, so that a computer device installed with the chip performs the method in any possible implementation of the first aspect.

[0058] In a seventh aspect, another chip is provided. The another chip includes an input interface, an output interface, a processor and a memory. The input interface, the output interface, the processor and the memory are connected through internal connection paths. The processor is configured to execute codes in the memory, and when the codes are executed, the processor is configured to perform the method in any possible implementation of the first aspect. BRIEF DESCRIPTION OF DRAWINGS

[0059] Figure 1 is a flowchart of a graphical display method provided by an embodiment of the present application;

[0060] Figure 2 is a flowchart of a graphical display method provided by an embodiment of the present application;

[0061] Figure 3 is a schematic diagram of a virtual auxiliary point provided by an embodiment of the present application;

[0062] Figure 4 is a schematic diagram of determination of a boundary point of a soft body provided by an embodiment of the present application;

[0063] Figure 5 is a schematic diagram of a boundary point of a soft body provided by an embodiment of the present application;

[0064] Figure 6 is a schematic diagram of a soft body provided by an embodiment of the present application;

[0065] Figure 7 is a schematic diagram of a distance between soft bodies provided by an embodiment of the present application;

[0066] Figure 8 is a schematic diagram of a relationship between three processes provided by an embodiment of the present application;

[0067] Figure 9 is a graphical display schematic provided by an embodiment of the present application;

[0068] Figure 10 is a graphical display schematic provided by an embodiment of the present application;

[0069] Figure 11 is a graphical display schematic provided by an embodiment of the present application;

[0070] Figure 12 is a graphical display schematic provided by an embodiment of the present application;

[0071] Figure 13 is a block diagram of a graphical display device provided by an embodiment of the present application;

[0072] Figure 14 is a structural schematic of a computer device provided by an embodiment of the present application. DETAILED DESCRIPTION

[0073] To make the purpose, technical solutions and advantages of the present application clearer, the embodiments of the present application will be further described in detail below with reference to the drawings.

[0074] In the related art, the Combo component of AntV adopts a circular envelope graph layout method, which is easy to cause a large amount of blank area and has a low screen efficiency ratio. In this method, the envelope graph is essentially only a node with a larger radius, so that the pattern displayed by the whole graph is relatively single, the layout effect is not beautiful enough, and lacks overall integrity and coordination in the visual aspect. In addition, the graph of the envelope graph in the related art does not change with the change of the node, so that the layout animation effect is stiff and unnatural, and the performance is not smooth enough.

[0075] To solve the problems in the related art, the embodiments of the present application provide a graphical display method and device. To facilitate the understanding of the technical solutions provided by the embodiments of the present application, first, some technical terms related to the present application are simply explained:

[0076] Force-directed algorithm: based on the combined force received by the node and the combined force received by the envelope graph, the positions of the node and the graph are calculated. This algorithm iteratively calculates in the life cycle.

[0077] Life cycle: the number of iterations of the combined force in the process of graphical display.

[0078] Combined force: the combination of the force received by the node or the envelope graph.

[0079] Master node: the node that the user interacts with.

[0080] From node: a node associated with a master node, for example, a node having a subordinate relationship with a master node; illustratively, the from node can be an attribute of the master node, or the from node can be content contained by the master node.

[0081] Soft body graph: the envelope graph provided by the embodiments of the present application is an envelope graph with irregular boundaries, which is used to wrap a group of from nodes. Since the boundaries of the graph will change flexibly with the position of the wrapped from nodes, or will change flexibly when the soft body graphs collide with each other, it is called a soft body graph. The soft body graph can better accommodate local topology, improve space utilization, and make the overall layout more compact and orderly.

[0082] Generation: the process of initially displaying a soft body graph based on the initial position of a from node.

[0083] Inflation: the process of gradually inflating the boundaries of a soft body graph as the from nodes in the soft body graph move due to the combined force.

[0084] Extrusion: the process of elastically separating each other by extrusion when a soft body graph overlaps with other existing soft body graphs.

[0085] The scheme provided by the present application can be applied to scenarios where data sets with containing relationship, parent-child relationship need to be hierarchically interactively explored, such as social network, intelligence analysis, data asset and knowledge graph and the like application scenarios.

[0086] For example, in the knowledge graph scenario, the master node can be a province, and the from node can be a city or a county. For another example, in the data graph scenario, the master node can be a data table, and the from node can be a data field.

[0087] Figure 1 is a flowchart of a graphical display method provided by the embodiments of the present application. The method can be executed by a computer device. As shown in Figure 1 the method includes the following steps.

[0088] S101: in response to an interactive operation acting on a master node, a plurality of from nodes associated with the master node are acquired.

[0089] In some possible implementation manners of the present application, the interactive operation can be a click operation, a touch operation or other operations. For example, the computer device detects a click operation acting on a first master node, and then acquires a plurality of from nodes associated with the first master node.

[0090] S102: display the plurality of from nodes and a soft body graph surrounding the plurality of from nodes, the soft body graph being irregular in shape, and the boundary of the soft body graph being set along the boundary of an outer from node in the plurality of from nodes.

[0091] For example, after identifying multiple slave nodes, the multiple slave nodes are displayed according to the set rules, and a soft body graphic is displayed based on the outline of the multiple slave nodes.

[0092] Among them, the outermost slave node refers to the slave node that is far from the center of the soft body graphic in each direction, that is, the slave node at the edge in each direction.

[0093] Among them, setting along the boundary of the outermost slave node among multiple slave nodes refers to setting it according to the outline of the outermost slave node among multiple slave nodes and at a certain distance from the edge of the slave node.

[0094] The boundary of the soft body graphic is set along the boundary of the outermost slave node among multiple slave nodes, so that the outline of the soft body graphic can completely surround the boundary of multiple slave nodes on the one hand, and on the other hand, the outline of the soft body graphic is not too large, resulting in too many gaps in the soft body graphic.

[0095] In the implementation of this application, when displaying the graphic surrounding the slave nodes, regular shapes such as circles or rectangles are no longer used. Instead, irregular soft-bodied graphics are used. The boundaries of the soft-bodied graphics are set along the boundaries of the outer slave nodes among multiple slave nodes. The irregular boundaries can better fit and wrap the internal node distribution, improving space utilization. The design of the soft-bodied graphics fitting the node distribution can avoid overly crowded or scattered layout problems, improving the layout screen efficiency ratio. At the same time, the enveloping graphic is no longer a node with a larger radius. The boundaries of the soft-bodied graphics are set based on the boundaries of the internal nodes, resulting in high overall visual aesthetics.

[0096] Figure 2 This is a flowchart illustrating a graphical display method provided in an embodiment of this application. This method can be executed by a computer device. Figure 2 As shown, the method includes the following steps.

[0097] S201: In response to an interactive operation performed on the master node, retrieve multiple slave nodes associated with the master node.

[0098] In some possible implementations of this application, the interactive operation can refer to a click operation, a touch operation, or other operations. For example, if a computer device detects a click operation on the first master node, it will obtain multiple slave nodes associated with the first master node.

[0099] For example, a computer device can determine multiple slave nodes associated with the identifier of a master node with which an interaction occurs, based on the identifier of that master node.

[0100] In this embodiment of the application, the association between the master node and the slave node can be configured and stored in advance, or the association between the master node and the slave node can be obtained from other computer devices or network servers.

[0101] S202: Based on the initial positions of multiple slave nodes, display multiple slave nodes and their soft body graphics.

[0102] The initial positions of the slave nodes can be preset. For example, multiple slave nodes can be evenly distributed around the master node; or multiple slave nodes can be randomly distributed within a certain range of the master node.

[0103] For example, when multiple slave nodes are randomly distributed, the initial positions of the multiple slave nodes are obtained based on a predetermined range and a random algorithm.

[0104] After determining the positions of multiple slave nodes, display the slave nodes at these positions. The graphics and related display properties of the slave nodes (such as line, fill, size, etc.) can be defined in advance, which will not be elaborated here.

[0105] At the same time, based on the outlines of multiple slave nodes after their positions are determined, a soft body graphic surrounding the multiple slave nodes is determined.

[0106] For example, step S202 may include:

[0107] The first step is to determine multiple virtual auxiliary points for each slave node, with these virtual auxiliary points distributed around the corresponding slave node.

[0108] In this embodiment, the virtual auxiliary point is a virtual point that does not exist in the final displayed graphic, and the function of the virtual auxiliary point is to help determine the boundary of the soft graphic.

[0109] For example, multiple virtual auxiliary points of the slave node are equidistant from the center of the slave node, and the multiple virtual auxiliary points of the slave node are set at equal intervals.

[0110] For example, each slave node can be configured with 6 or 8 virtual auxiliary points.

[0111] The following example uses six virtual auxiliary points. Assume the center coordinates of the slave node are (x, y), and the virtual auxiliary points are distributed on a circle with radius r centered at the slave node. The coordinates of the six virtual auxiliary points a1 to a6 are as follows:

[0112] a1 = (x + r, y)

[0113] a4 = (x, y + r)

[0114] a2=(x+r×sin30°,y+r×sin60°)

[0115] a3=(xr×sin30°,yr×sin60°)

[0116] a5=(xr×sin30°,y+r×sin60°)

[0117] a6=(xr×sin30°,y+r×sin60°)

[0118] Figure 3 This is a schematic diagram of a virtual auxiliary point provided in an embodiment of this application. For example... Figure 3 As shown, each of the three slave nodes (large circles in the figure) is surrounded by six virtual auxiliary points (small circles in the figure).

[0119] In the illustrations of this application's embodiments, each node is represented by a circle. Of course, this is only an example and is not intended to limit this application.

[0120] The second step is to determine the boundary points of the soft body graphic based on multiple virtual auxiliary points of each slave node.

[0121] After the first step, a set of virtual auxiliary points (virtual node set) of multiple slave nodes is obtained. From the set of virtual auxiliary points, virtual auxiliary points that can be used as boundaries are selected, that is, the boundary points of the soft body graphic are determined.

[0122] In the implementation of this application, the Alpha-Shape algorithm can be used to determine the boundary points of the soft body graphic.

[0123] For example, a scroll wheel with radius R is defined. The size of R can be preset, for example, set to the distance between the two farthest virtual auxiliary points in the same group of slave nodes. For example, a group of slave nodes includes six slave nodes A to E, each slave node includes 6 virtual auxiliary nodes, for a total of 36 virtual auxiliary nodes, and R is the distance between the two farthest virtual auxiliary nodes in the 36 virtual auxiliary nodes.

[0124] For any two points Pi and Pj in the set of virtual nodes P, check whether the roller with radius R contains only points Pi and Pj when the line segment connecting Pi and Pj is used as the chord of the roller, and does not contain any other virtual auxiliary points. If this condition is met, then Pi and Pj are determined to be boundary points.

[0125] Figure 4 This is a schematic diagram illustrating the determination of boundary points for a soft-body graphic according to an embodiment of this application. For example... Figure 4As shown, for the line segment (dashed line segment) formed by P1 and P3, there are two ways to use it as the chord of the roller (dashed circle). However, as shown in the figure, when the line segment formed by P1 and P3 is used as a chord, the roller will contain other points in both cases, thus the condition is not met, and P1 and P3 cannot be used as boundary points. For the line segment formed by P1 and P2, there are two ways to use it as the chord of the roller. As shown in the figure, when the line segment formed by P1 and P2 is used as a chord, the roller will contain other points in one case, and will not contain other points in the other case, thus the condition is met, and P1 and P2 can be used as boundary points. Figure 4 The size of the medium-sized roller is for illustrative purposes only; rollers are typically much larger. Figure 4 As shown, this allows the scroll wheel to include virtual auxiliary points of other slave nodes during operation. Figure 4 For example, as shown below, if Figure 4 The system also includes other slave nodes. When the line segment formed by P1 and P2 is used as a chord, if in another case the roller also contains virtual auxiliary points of other adjacent slave nodes, then P1 and P2 cannot be used as boundary points.

[0126] Figure 5 This is a schematic diagram of the boundary points of a soft-body graphic provided in an embodiment of this application. For example... Figure 5 As shown, Figure 3 The virtual auxiliary point shown passes through Figure 4 The filtering method shown results in 6 line segments, and the endpoints of these 6 line segments are the boundary points.

[0127] The third step is to create smooth lines based on the boundary points of the soft body graphic to obtain the soft body graphic.

[0128] In this step, a smoothing algorithm (such as the front-end line optimization algorithm in d3.js technology) is used to connect the boundary points obtained in the second step into smooth lines.

[0129] Figure 6 This is a schematic diagram of a soft-body graphic provided in an embodiment of this application. For example... Figure 6 As shown, in Figure 4 and Figure 5 Based on the determined boundary points, a smoothing algorithm is used to obtain the soft body graphic as shown in the figure. Figure 6 The positions of the slave nodes are shown for illustrative purposes only and are not intended to limit the implementation of this application. Since the boundary points are virtual auxiliary points and not the boundaries of the slave nodes, the soft body graphic obtained by the smoothing algorithm may not necessarily pass through all boundary points.

[0130] S203: Based on the expansion combination force of multiple slave nodes, iteratively update the positions of multiple slave nodes.

[0131] Among them, the expansion combination force refers to the combination force applied to the slave node during the expansion process of the soft body graphic.

[0132] In step S202, the slave nodes at the initial position are displayed and the soft body graphic is drawn based on the initial position. However, since multiple slave nodes may overlap or be squeezed at the initial position, the distribution of slave nodes is not balanced. Therefore, it is necessary to update the slave node position based on the expansion combination force of the slave nodes.

[0133] In the implementation of this application, a force-guided algorithm is used to define the expansion combination force of the slave node, and the position of the slave node is updated based on the expansion combination force.

[0134] Table 1 below defines the expansion combination force of the slave node according to the embodiments of this application:

[0135] Table 1

[0136]

[0137] As shown in Table 1, the forces acting on a node include charge force, edge force, and center force. Charge force refers to the repulsive force between any two nodes in the same group of slave nodes. Edge force refers to the force between two nodes in the same group of slave nodes that are connected by an edge (e.g., the edge connecting the master and slave nodes). Since there is a mutual edge force between the two connected nodes, it includes edge forces in two directions, hence edge force-1 and edge force-2. Center force refers to the force acting on a node towards the center of the group of slave nodes.

[0138] In Table 1, Ω represents the domain of force (i.e., the object on which the force acts), where This indicates that the force acts on node H. i Between other nodes; The object represents the relationship between the parent node H and the child node H. i A related edge; The object represents the node H. i ω, α, and β are variables in the force-guided formula, where ω is the linear weighting coefficient, and α and β are the nonlinear weighting coefficients. The variable definitions in Table 1 are merely an example to achieve a more balanced distribution of slave nodes. ij This represents the set distance between nodes. Dijkstra × 10 means 10 times the distance determined by Dijkstra's shortest distance algorithm. Of course, this is just an example. " / " represents any value.

[0139] In this embodiment of the application, the force guiding formula is as follows:

[0140]

[0141] Where F represents force, ||x i -x j|| represents the actual distance between two objects, such as the actual distance between two child nodes, e ij This represents the direction vector between two objects, such as the direction vector between two slave nodes. When calculating the central force, the actual distance between the two objects is the actual distance from the node to the center, and the direction vector between the two objects is the direction vector from the node to the center. This center can be the centroid of multiple slave nodes or the center of the soft body graphic.

[0142] Based on Table 1 and the force-guided formula, the forces acting on each slave node can be determined. Then, based on the calculated forces, the force-guided algorithm converts the forces acting on the slave nodes into positional movements, iterating over the positions of the slave nodes. For nodes in new soft body graphics generated after user interaction, the number of iterations can be the total lifetime count, such as 300 times. For nodes in existing soft body graphics, the number of iterations can be the local lifetime count, such as 10 times.

[0143] S204: Based on the updated positions of multiple slave nodes, display multiple slave nodes and their soft-body graphics.

[0144] In this embodiment, after a set number of iterations, multiple slave nodes and their soft-body graphics are displayed based on their positions. That is, updating the slave node positions causes the shape of the soft-body graphics to change. This continuous change produces an animation effect, and this method makes the changes in the soft-body graphics more coherent and the animation effect smoother.

[0145] In one example, the computer device can update the position of the slave node after each iteration and display multiple slave nodes and soft graphics of the multiple slave nodes based on that position.

[0146] In another example, the computer device can update the position of the slave node every few iterations (e.g., 5 times) and display multiple slave nodes and soft graphics of the multiple slave nodes based on that position.

[0147] In this step, the method for displaying multiple slave nodes and their soft body graphics can be found in step S202, and will not be repeated here.

[0148] Through steps S202 to S204, dynamic rendering of nodes and soft-body graphics, i.e., animation effects, is achieved. Furthermore, the above steps make the animation effects smoother and more fluid.

[0149] S205: Determine the distance between two soft body graphics.

[0150] When a soft body graphic already exists in the image, after generating a new soft body graphic, it is necessary to consider whether the soft body graphics overlap.

[0151] In this embodiment of the application, for some individual nodes that are not within the soft body graphic, these individual nodes can also be considered as soft body graphics. That is, the collision between the individual node and the soft body graphic is processed in the manner of steps S205 to S207. For example, in S205, the distance between the individual node and the soft body graphic is determined. Other steps are similar, which are simply replacing the two soft body graphics with the individual node and the soft body graphic.

[0152] In this embodiment of the application, step S205 may include:

[0153] The first step is to determine the centroids of the two soft-body shapes.

[0154] For example, the centroid of the soft body graphic (i.e., the centroid of multiple slave nodes) is determined according to the following formula:

[0155]

[0156] Among them, X c Represents the centroid coordinates, (x i ,y i ) represents a soft graphic h i From the node coordinates, Represents a soft graphic h i Number of nodes in the middle.

[0157] The second step is to calculate the distance between the two soft shapes based on their centroids and virtual auxiliary points.

[0158] Figure 7 This is a schematic diagram illustrating the distance between soft-body graphics provided in an embodiment of this application. For example... Figure 7 As shown, the centroid of the left soft body is Xc1, and the centroid of the right soft body is Xc2. The nearest virtual auxiliary points in the left soft body to the right soft body are p1 and p2, and the nearest virtual auxiliary points in the right soft body to the left soft body are p3 and p4. The distance between the two soft bodies is the distance between a1 and a2. Here, a1 is the intersection of the line connecting Xc1 and Xc2 with the line connecting p1 and p2, and a2 is the intersection of the line connecting Xc1 and Xc2 with the line connecting p3 and p4.

[0159] S206: Determine whether two soft body graphics overlap based on the distance between them.

[0160] For example, if the distance between two soft body graphics is greater than a distance threshold, it is determined that the two soft body graphics do not overlap. If the distance between two soft body graphics is not greater than the distance threshold, it is determined that the two soft body graphics overlap.

[0161] The distance threshold of the soft body can be designed according to needs, and this application embodiment does not limit it.

[0162] If the two soft body graphics overlap, proceed to step S207. If the two soft body graphics do not overlap, it is not necessary to redisplay the two soft body graphics and their slave nodes.

[0163] If it is a soft body graphic and a single node, the step is: based on the distance between the soft body graphic and the single node, determine whether there is any overlap between the soft body graphic and the single node.

[0164] S207: If two soft body graphics overlap, redisplay both soft body graphics and their slave nodes.

[0165] When two soft shapes overlap, their positions need to be redefined based on the repulsive forces between them. This process is iterative, and the number of iterations can be the number of times the local lifecycle ends, such as 10 times.

[0166] If it is a soft body graphic and a single node, the step is as follows: if the soft body graphic and the single node overlap, redisplay the soft body graphic, the child nodes in the soft body graphic, and the single node. The single node does not belong to any soft body graphic.

[0167] This method is also applicable to situations where multiple soft shapes overlap. In such cases, calculations can be performed on each pair of soft shapes to eventually separate them.

[0168] For example, step S207 may include:

[0169] The first step is to determine the centroid positions of the two flexible shapes based on the repulsive force between them.

[0170] In the implementation of this application, a force-guided algorithm is used to define the repulsive force of the soft body graphic, and the centroid position of the soft body graphic is updated based on the repulsive force of the soft body graphic.

[0171] Table 2 below defines the repulsive force of flexible graphic elements provided in the embodiments of this application:

[0172] Table 2

[0173]

[0174] In Table 2, This indicates that the force acts on the flexible graphic h. i The centroid of the object is between the centroids of the object and the centroids of other soft-body shapes.

[0175] Based on Table 2 and the force-guided formula, the forces acting on each soft body shape can be determined. Then, based on the calculated forces, the centroid position of the soft body shape is iterated using the force-guided algorithm.

[0176] The second step is to determine the positions of the slave nodes within the two flexible shapes based on the position of the centroid of the flexible shape and the attraction of the nodes within the flexible shape.

[0177] In this process, the node attraction within the soft body graphic is the central force shown in Table 1. After the central force causes the slave node positions to update, the other forces in Table 1 will also reappear, thus updating the slave node positions within the soft body graphic. In this step, since it targets nodes in an existing soft body graphic, the number of iterations can be the number of local lifetimes, such as 10.

[0178] The third step is to display the two soft shapes and their respective child nodes based on the positions of the child nodes within the two soft shapes.

[0179] In some possible implementations of this application, the computer device can update the position of the slave node within the two soft body graphics after each iteration, and display the soft body graphics and slave nodes based on the position.

[0180] In some other possible implementations of this application, the computer device may update the position of the slave node within the two soft body graphics after every few iterations (e.g., 5 times) and display the soft body graphics and slave nodes based on that position.

[0181] In this step, the method for displaying the soft body graphic and its nodes can be found in step S202, and will not be repeated here.

[0182] In this embodiment, steps S205 to S207 are not sequentially related to steps S203 to S204. For example, steps S203 to S204 can be executed first, followed by steps S205 to S207. Alternatively, steps S205 to S207 can be executed first, followed by steps S203 to S204. Or, steps S205 to S207 and steps S203 to S204 can be executed simultaneously.

[0183] In the embodiments of this application, steps S201 and S202 correspond to the soft body graphic generation process, steps S203 and S204 correspond to the soft body graphic expansion process, and steps S205 to S207 correspond to the soft body graphic compression process.

[0184] Figure 8 This is a schematic diagram illustrating the relationship between the three processes provided in the embodiments of this application. For example... Figure 8As shown, the generation process occurs when a new soft body graphic is added. After the soft body graphic is generated, it will expand. The expansion increases the area of ​​the soft body graphic, which may overlap with other soft body graphics, thus causing compression. When soft body graphics are compressed, they will elastically separate. This separation may cause compression with other soft body graphics and may also cause temporary chaos in the internal layout of the soft body graphic, leading to changes in the node positions within the soft body graphic, which in turn triggers a new round of expansion to restore the balance and aesthetics of the soft body. In the above process, changes in the node positions will cause changes in the soft body graphic, and changes in the soft body graphic will also cause changes in the node positions. The two influence each other and eventually reach equilibrium through continuous iteration.

[0185] Figures 9 to 12 This is a graphical display diagram provided in an embodiment of this application. For example... Figure 9 As shown, when a user clicks node J, multiple nodes T and the first soft body graphic enclosing these nodes T are displayed; as... Figure 10 As shown, when a user clicks on a node T in the first soft body graphic, multiple nodes L and a second soft body graphic enclosing these nodes L are displayed; as... Figure 11 As shown, when a user clicks on another node T in the first soft body graphic, multiple nodes L and a third soft body graphic enclosing these nodes L are displayed; as... Figure 12 As shown, when a user clicks on another node T in the first soft body graphic, multiple nodes L and a fourth soft body graphic enclosing these nodes L are displayed. It can be seen that during the above graphical display process, the node positions and the shapes of the soft bodies change as new nodes and soft bodies appear, and from... Figures 9 to 12 It can be seen that the creation of new soft body graphics will compress the old soft body graphics, resulting in phenomena such as compression and separation. Furthermore, Figures 9 to 12 The mouse position in the image does not represent the current click position.

[0186] based on Figures 9 to 12 As can be seen, master nodes and slave nodes are relative. For example, the slave node generated in this interaction can serve as the master node for subsequent interaction operations.

[0187] In this embodiment, the continuous iteration of the node position and the shape of the soft body graphic makes the changes of the soft body graphic seen by the user coherent, and the animation effect of the soft body graphic is smoother.

[0188] Taking the data graph scenario as an example, in the dataset of the data graph, there are a large number of data table nodes and job nodes that connect the data tables. Each data table node contains corresponding data field nodes (such as primary keys and foreign keys).

[0189] The graphical display scheme provided in this application extracts the network relationships of core nodes as the main body of the data graph. When a user clicks on a data table node in the main body, the data field nodes of that table node are displayed. These data field nodes are enveloped by soft-body graphics, and the position of the data field nodes and the shape of the soft-body graphics are continuously optimized and displayed in an animated manner after they appear. This ensures both efficient space utilization of the graphical data graph and aesthetic appeal and animation effects.

[0190] Figure 13 This is a block diagram of a graphical display device provided in an embodiment of this application. The graphical display device can be implemented as all or part of a computer device through software, hardware, or a combination of both. The graphical display device may include an acquisition unit 301 and a display unit 302.

[0191] The acquisition unit 301 is used to acquire multiple slave nodes associated with the master node in response to the interactive operation performed on the master node.

[0192] Display unit 302 is used to display multiple slave nodes and a soft body graphic surrounding the multiple slave nodes. The soft body graphic is an irregular shape, and the boundary of the soft body graphic is set along the boundary of the outer slave node among the multiple slave nodes.

[0193] For example, the display unit 302 is used to display multiple slave nodes and their soft body graphics based on the initial positions of the multiple slave nodes; to iteratively update the positions of the multiple slave nodes based on the expansion combination force of the multiple slave nodes; and to display the multiple slave nodes and their soft body graphics based on the updated positions of the multiple slave nodes.

[0194] For example, the display unit 302 is used to display multiple slave nodes and their soft body graphics based on the positions of multiple slave nodes each time a set number of iterations are reached.

[0195] For example, the display unit 302 is used to determine multiple virtual auxiliary points for each slave node, the multiple virtual auxiliary points being distributed around the corresponding slave node; determine the boundary points of the soft body graphic based on the multiple virtual auxiliary points of each slave node; and form smooth lines based on the boundary points of the soft body graphic to obtain the soft body graphic.

[0196] Optionally, the display unit 302 is also configured to redisplay the two soft body graphics and the slave nodes in the two soft body graphics when the two soft body graphics overlap.

[0197] Alternatively, if there is overlap between a soft body graphic and an individual node, the soft body graphic, its child nodes, and the individual node are re-displayed, where the individual node does not belong to any soft body graphic.

[0198] For example, the display unit 302 is used to determine the centroid positions of two soft body graphics based on the repulsive force of the soft body graphics; determine the slave node positions within the two soft body graphics based on the centroid positions of the soft body graphics and the attraction forces between the nodes within the soft body graphics; and display the two soft body graphics and the slave nodes within the two soft body graphics based on the slave node positions within the two soft body graphics.

[0199] For example, the display unit 302 is also used to determine the distance between two soft body graphics; and based on the distance between the two soft body graphics, to determine whether the two soft body graphics overlap.

[0200] It should be noted that the graphical display device provided in the above embodiments is only illustrated by the division of the above functional units when performing graphical display. In practical applications, the above functions can be assigned to different functional units as needed, that is, the internal structure of the device can be divided into different functional units to complete all or part of the functions described above. In addition, the graphical display device and the graphical display method embodiments provided in the above embodiments belong to the same concept, and the specific implementation process can be found in the method embodiments, which will not be repeated here.

[0201] Figure 14 A schematic diagram of the structure of a computer device 150 provided in an embodiment of this application is shown. Figure 14 The computer device 150 shown is used to perform the above. Figure 1 or Figure 2 The graphical display method shown involves the operations described. This computer device 150 can be implemented using a general bus architecture.

[0202] like Figure 14 As shown, the computer device 150 includes at least one processor 151, a memory 153, and at least one communication interface 154.

[0203] Processor 151 may be, for example, a general-purpose central processing unit (CPU), a digital signal processor (DSP), a network processor (NP), a data processing unit (DPU), a microprocessor, or one or more integrated circuits for implementing the embodiments of this application. For example, processor 151 may include an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or other programmable logic devices, transistor logic devices, hardware components, or any combination thereof. A PLD may be, for example, a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), generic array logic (GAL), or any combination thereof. It can implement or execute the various logic blocks, modules, and circuits described in connection with the embodiments of this application. A processor may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0204] Optionally, the computer device 150 also includes a bus. The bus is used to transfer information between the various components of the computer device 150. The bus can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 14 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0205] Memory 153 may be, for example, read-only memory (ROM) or other types of static storage devices capable of storing static information and instructions; random access memory (RAM) or other types of dynamic storage devices capable of storing information and instructions; electrically erasable programmable read-only memory (EEPROM); compact disc read-only memory (CD-ROM) or other optical disc storage, optical disc storage (including compressed discs, laser discs, optical discs, digital versatile discs, Blu-ray discs, etc.); magnetic disk storage media or other magnetic storage devices; or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto. Memory 153 may exist independently and be connected to processor 151 via a bus. Memory 153 may also be integrated with processor 151.

[0206] Communication interface 154 uses any transceiver-like device for communicating with other devices or communication networks, such as Ethernet, Radio Access Network (RAN), or Wireless Local Area Network (WLAN). Communication interface 154 may include wired and wireless communication interfaces. Specifically, communication interface 154 may be an Ethernet interface, Fast Ethernet (FE) interface, Gigabit Ethernet (GE) interface, Asynchronous Transfer Mode (ATM) interface, WLAN interface, cellular network communication interface, or a combination thereof. The Ethernet interface may be an optical interface, an electrical interface, or a combination thereof. In this embodiment, communication interface 154 can be used by computer device 150 to communicate with other devices.

[0207] In a specific implementation, as one example, processor 151 may include one or more CPUs, such as Figure 14 The CPU0 and CPU1 shown are examples of processors. Each of these processors can be a single-core processor or a multi-core processor. A processor here can refer to one or more devices, circuits, and / or processing cores used to process data (e.g., computer program instructions).

[0208] In a specific implementation, as one example, the computer device 150 may include multiple processors, such as... Figure 14 The processors 151 and 155 shown are illustrated. Each of these processors can be a single-core processor or a multi-core processor. Here, "processor" can refer to one or more devices, circuits, and / or processing cores used to process data (such as computer program instructions).

[0209] In a specific implementation, as one embodiment, the computer device 150 may further include an output device and an input device. The output device communicates with the processor 151 and can display information in various ways. For example, the output device may be a liquid crystal display (LCD), a light-emitting diode (LED) display device, a cathode ray tube (CRT) display device, or a projector, etc. The input device communicates with the processor 151 and can receive user input in various ways. For example, the input device may be a mouse, a keyboard, a touchscreen device, or a sensing device, etc.

[0210] In some embodiments, memory 153 is used to store program code 1510 for executing the solution of this application, and processor 151 can execute the program code 1510 stored in memory 153. That is, computer device 150 can execute program code 1510 in memory 153 through processor 151 to implement the graphical display method provided in the method embodiment. Program code 1510 may include one or more software modules. Optionally, processor 151 itself may also store program code or instructions for executing the solution of this application.

[0211] In a specific embodiment, the computer device 150 of this application embodiment may correspond to the controller in the above-described method embodiments. The processor 151 in the computer device 150 reads instructions from the memory 153, causing... Figure 14 The computer device 150 shown is capable of performing all or part of the operations performed by the controller.

[0212] Specifically, the processor 151 is used to respond to the interactive operation performed on the master node, obtain multiple slave nodes associated with the master node; display the multiple slave nodes and a soft body graphic surrounding the multiple slave nodes, the soft body graphic being an irregular shape, and the boundary of the soft body graphic being set along the boundary of the outer slave node among the multiple slave nodes.

[0213] Other alternative implementation methods will not be described in detail here for the sake of brevity.

[0214] in,Figure 1 or Figure 2 Each step of the graphical display method shown is completed by the integrated logic circuitry of the hardware in the processor of the computer device 150 or by instructions in the form of software. The steps of the method disclosed in the embodiments of this application can be directly implemented by the hardware processor, or by a combination of hardware and software modules in the processor. The software modules can reside in random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or other mature storage media in the art. Since this storage medium is located in memory, the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the above method; to avoid repetition, these will not be described in detail here.

[0215] This application also provides a chip, including: an input interface, an output interface, a processor, and a memory. The input interface, output interface, processor, and memory are connected via internal interconnection paths. The processor is used to execute code in the memory, and when the code is executed, the processor is used to execute any of the graphical display methods described above.

[0216] It should be understood that the aforementioned processor can be a CPU, or it can be other general-purpose processors, DSPs, ASICs, FPGAs, or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. General-purpose processors can be microprocessors or any conventional processor. It is worth noting that the processor can be a processor supporting the ARM architecture.

[0217] Further, in an optional embodiment, the processor and the memory may be one or more. Optionally, the memory may be integrated with the processor, or the memory may be separately configured from the processor. The memory may include read-only memory and random access memory, and provide instructions and data to the processor. The memory may also include non-volatile random access memory. For example, the memory may also store reference blocks and target blocks.

[0218] The memory can be volatile or non-volatile, or may include both. Non-volatile memory can be ROM, PROM, EPROM, EEPROM, or flash memory. Volatile memory can be RAM, used as an external cache. Many forms of RAM are available by way of example, but not limitation. Examples include SRAM, DRAM, SDRAM, DDR SDRAM, ESDRAM, SLDRAM, and DR RAM.

[0219] In this embodiment of the application, a computer-readable storage medium is also provided, which stores computer instructions. When the computer instructions stored in the computer-readable storage medium are executed by a computer device, the computer device performs the graphical display method provided above.

[0220] In this embodiment of the application, a computer program product containing instructions is also provided, which, when run on a computer device, causes the computer device to execute the graphical display method provided above.

[0221] In the above embodiments, implementation can be achieved, in whole or in part, through software, hardware, firmware, or any combination thereof. When implemented in software, it can be implemented, in whole or in part, as a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in this application are generated. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium accessible to a computer or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state drive).

[0222] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0223] The above description is merely an optional embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0224] Unless otherwise defined, the technical or scientific terms used herein shall have the ordinary meaning as understood by one of ordinary skill in the art to which this application pertains. The terms “first,” “second,” “third,” and similar terms used in this patent application specification and claims do not indicate any order, quantity, or importance, but are merely used to distinguish different components. Similarly, the terms “an” or “a” and similar terms do not indicate a quantity limitation, but rather indicate the presence of at least one. The terms “comprising” or “including” and similar terms mean that the elements or objects preceding “comprising” or “including” encompass the elements or objects listed following “comprising” or “including” and their equivalents, and do not exclude other elements or objects.

[0225] The above is merely one embodiment of this application and is not intended to limit this application. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the protection scope of this application.

Claims

1. A method of graphical display, characterized by, The graphical display includes: In response to an interaction operation acting on a master node, a plurality of slave nodes associated with the master node are acquired; The plurality of slave nodes and a soft body graphic surrounding the plurality of slave nodes are displayed, the soft body graphic is irregularly shaped, and the boundary of the soft body graphic is arranged along the boundary of an outer slave node in the plurality of slave nodes.

2. The method of claim 1, wherein, The display of the plurality of slave nodes and the soft body graphic surrounding the plurality of slave nodes includes: Based on the initial positions of the plurality of slave nodes, the plurality of slave nodes and the soft body graphic of the plurality of slave nodes are displayed; Based on the combined inflation force of the plurality of slave nodes, the positions of the plurality of slave nodes are iteratively updated; Based on the updated positions of the plurality of slave nodes, the plurality of slave nodes and the soft body graphic of the plurality of slave nodes are displayed.

3. The method of claim 2, wherein, The display of the plurality of slave nodes and the soft body graphic of the plurality of slave nodes based on the updated positions of the plurality of slave nodes includes: Every time a set number of iteration updates is reached, the plurality of slave nodes and the soft body graphic of the plurality of slave nodes are displayed based on the positions of the plurality of slave nodes.

4. The method according to claim 2 or 3, characterized in that, The display of the plurality of slave nodes and the soft body graphic of the plurality of slave nodes includes: A plurality of virtual auxiliary points of each of the slave nodes are determined, the plurality of virtual auxiliary points are distributed around the corresponding slave node; Based on the plurality of virtual auxiliary points of each of the slave nodes, boundary points of the soft body graphic are determined; Based on the boundary points of the soft body graphic, a smooth line is formed to obtain the soft body graphic.

5. The method according to any one of claims 1 to 4, characterized in that, The method further includes: In the case of overlap between two soft body graphics, the two soft body graphics and the slave nodes in the two soft body graphics are re-displayed; Or, in the case of overlap between the soft body graphic and a separate node, the soft body graphic, the slave nodes in the soft body graphic, and the separate node that does not belong to any soft body graphic are re-displayed.

6. The method of claim 5, wherein, The re-displaying of the two soft body graphics and the slave nodes in the two soft body graphics includes: Based on the repulsive force of the soft body graphic, the centroid positions of the two soft body graphics are determined; Based on the centroid positions of the soft body graphic and the attractive force of the nodes within the soft body graphic, the positions of the slave nodes within the two soft body graphics are determined; Based on the positions of the slave nodes within the two soft body graphics, the two soft body graphics and the slave nodes in the two soft body graphics are displayed.

7. The method according to claim 5 or 6, characterized in that, The method further includes: The distance between the two soft body graphics is determined; Based on the distance between the two soft body graphics, it is determined whether there is overlap between the two soft body graphics.

8. A graphical display device, characterized by The device includes: An acquisition unit is configured to acquire a plurality of slave nodes associated with a master node in response to an interaction operation acting on the master node; A display unit is configured to display the plurality of slave nodes and a soft body graphic surrounding the plurality of slave nodes, the soft body graphic being irregularly shaped, and the boundary of the soft body graphic being arranged along the boundary of an outer slave node in the plurality of slave nodes.

9. A computer device, comprising: The computer device includes a memory and one or more processors, the memory is configured to store a computer program, and the one or more processors are configured to execute the computer program in the memory, so that the computer device performs the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer readable storage medium is configured to store program codes executed by the processor, and the program codes comprise instructions for implementing the method according to any one of claims 1 to 7.

Images