Method, system and device for rendering and interacting with a relationship graph by hovering focus on an associated element

Abstract

The application relates to a rendering method and an interaction method and system for hovering focus on associated elements in a relationship graph. In the rendering stage, a node identifier attribute is written for a node graph element, and a start point and an end point identifier attribute are written for an edge graph element, so that an adjacency relationship is borne by the rendered graph element itself instead of being built in an index. The edge graph element is composed of a visible line and a hit band sharing the same path. The visible line does not receive a pointer event, and the hit band is transparently widened and only responds to a pointer event in a stroke area. In the interaction, an associated set is determined by attribute query, only the associated set is added with a reserved mark and a state mark on a container, a style rule is made effective, and the associated set is highlighted, and any graph element geometric attribute is not changed. When an auxiliary key is pressed, a breadth-first traversal is performed once to cover upstream and downstream reachable links. Advantages are that fine connection line hit jitter is eliminated, shielding and rearrangement are avoided, a writing operation amount is only related to the associated set, a response is instant, and a state is zero residual.

Description

Technical Field

[0001] This application relates to the field of data visualization and graphical interaction technology, and in particular to a rendering method, interaction method and system for hovering and focusing on related elements in a relationship graph. Background Technology

[0002] Relationship diagrams (such as dependency diagrams, flowcharts, and process model diagrams) consist of nodes and connections, used to express the relationships between elements. In fields such as process modeling and systems engineering, as the scale of the system increases, the number of nodes in the relationship diagram becomes large and the connections become densely intersecting. Users find it difficult to quickly identify which other elements a certain element is directly related to, and it is also difficult to trace the complete upstream and downstream dependency chain along the relationships. At the same time, when users interact by hovering, the interaction is required to not produce visual jitter, not require switching to other views, and be able to accommodate the difficulty of pointer operation caused by the thinness of the connections themselves.

[0003] In existing technologies, the following methods are commonly used to view the relationships in a relationship diagram: The first method involves clicking to enter a details or filter view. After clicking on an element, the user is redirected to a separate details page or filter view to view its relationships. However, this method requires destroying and rebuilding the rendering context when switching views, resulting in the loss of global viewport position, zoom level, layout state, and other graphical states. The user then needs to reposition, leading to a high interaction cost.

[0004] The second method uses thicker lines or larger nodes for highlighting. Hovering over or selecting a node increases the line width or node size for differentiation. However, this method alters the geometry of graphic elements, causing them to overlap and press against each other in dense areas, exacerbating occlusion problems. Furthermore, changes in geometry may trigger a re-layout or redraw, creating a visual abrupt change.

[0005] The third approach involves the visible lines directly handling pointer events. The visible graphic element of the line is responsible for both display and responding to pointer events. However, since the visible width of the line is usually only one or two pixels, the effective hit area of ​​the pointer is too small, making it difficult to reliably hit and distinguish adjacent lines in dense areas. If the line itself also has a dashed flowing animation, the gaps in the animation will cause the pointer to enter and leave events at high frequency, resulting in flickering highlights that cannot be maintained stably.

[0006] The fourth method displays only the layer of relationships directly connected to the target node when hovering. However, this method does not support tracing along the link and cannot answer graph reading needs that require seeing the entire link, such as "Where does this dependency extend to?"

[0007] For example, patent CN115220624A discloses a method for highlighting links. It determines the corresponding node based on the mouse position and displays the related links of the node in a highlighted mode, with the link color differing from the normal mode. Furthermore, it avoids disordered highlighting caused by random mouse movements by determining whether the mouse stays over the node's sensing area for more than a set time. Simultaneously, this solution sets up a separate storage block for each link in the database and retrieves the related links of the node by calling the database. However, this solution delays the highlighting response by setting a time threshold, essentially sacrificing responsiveness as an interaction layer avoidance measure, and cannot fundamentally eliminate the alternating pointer entry / exit events caused by gaps in the connection animation. Additionally, this solution only changes the color of related links, without downsaturating irrelevant elements, making it difficult for users to quickly focus on target elements in dense graphs. This solution also relies on the database to store link states, leading to data synchronization and consistency issues between link query results and rendering results. Moreover, this solution can only display directly related links of a node and does not support further tracing along upstream and downstream links.

[0008] Based on this, the present invention is proposed. Summary of the Invention

[0009] The purpose of this invention is to provide a rendering method, interaction method and system for hovering and focusing on related elements in a relationship graph. Within the original rendering context and without changing the geometric properties of the graphic elements, it achieves stable hit determination in thin-line scenes, focused display of related elements and weakening of irrelevant elements, and supports tracing along upstream and downstream links.

[0010] To achieve the above objectives, the present invention provides the following technical solution: A rendering method for hovering and focusing on related elements in a relationship graph includes the following process: Write node identifier attributes to node primitives and start point identifier attributes and end point identifier attributes to edge primitives, so that the adjacency relationship of the relation graph is carried by the rendered primitives themselves, without establishing an adjacency index structure separately. The edge primitive is constructed as a two-layer graphic object. The two-layer graphic object includes a visible line and a hit band that share the same path. The stroke width of the hit band is greater than the stroke width of the visible line. The visible line is configured not to receive pointer events and is only responsible for display. The hit band is configured to be completely transparent and not filled, and only responds to pointer events within its stroke area. The hover hit determination of the edge primitive is only undertaken by the hit band. The style rule is set, which includes a status flag and a selector. When the status flag exists on the container carrying the primitives whose identification attributes have been written, the style rule takes effect, and the selector adjusts the primitives in the container accordingly. Otherwise, the style rule does not take effect. Among them, the matching adjustment of edge primitives only applies to their visible lines, and the matching adjustment does not change the geometric properties of any primitive.

[0011] Furthermore, the selector performs matching adjustments on the primitives within the container, including the following processes: Determine whether the graphic elements within the container have a reserved marker. The reserved marker is added during the interaction process and is used to identify the graphic element targeted by the hover and its associated graphic elements. Reduce the opacity of primitives that do not have the reserved mark, and change at least one of the following for primitives that have the reserved mark: brightness, color, label thickness, luminance, and periodic brightness variation.

[0012] An interactive method for hovering and focusing on associated elements in a relationship graph based on the rendering method, characterized by comprising the following processes: Step S1: Hover the pointer over the target primitive; When the target graph element is a node graph element, the node identifier attribute of the node graph element is used as the query parameter to initiate an attribute query within the container range, obtain all edge graph elements whose start point identifier attribute or end point identifier attribute is equal to the query parameter, and determine the node graph element at the other end of each obtained edge graph element; the target graph element, the obtained edge graph elements and the node graph elements at the other end constitute an association set; When the target primitive is an edge primitive, the node primitives at both ends of the edge primitive are determined; the target primitive and the node primitives at both ends constitute an association set; Primitives outside the associated set are defined as irrelevant sets; Step S2: Add a retention mark only to the primitives in the association set, and add the status mark to the container; Step S3: When there is a status marker on the container, the style rule takes effect. The selector adjusts the elements in the container according to whether the elements have a reserved marker. That is, it reduces the opacity of elements in the irrelevant set and changes at least one of the following: brightness, color, label thickness, light emission, and periodic brightness and darkness changes for elements in the associated set. Step S4: After the pointer moves out of the target graphic element, clear all added retention marks and status marks to restore each graphic element to its initial appearance.

[0013] Furthermore, in step S1, hovering traffic splitting is achieved by setting edge channels and node channels: When the target primitive is an edge primitive, this hovering operation enters the edge channel; When the target primitive is a node primitive and the pointer hit position does not fall within any edge primitive, the hover enters the node channel. At most one of the edge channels and node channels is active at any given time, and each uses a different retention flag and status flag.

[0014] Furthermore, the edge channel and node channel have different levels of opacity reduction for irrelevant primitives: In edge channels, the reduction in edge primitives of irrelevant sets is greater than that of node primitives of irrelevant sets; In the node channel, the reduction in edge primitives of the irrelevant set is the same as that of node primitives of the irrelevant set.

[0015] Furthermore, in step S1, when the target primitive is a node primitive and the preset auxiliary key is pressed when the pointer is hovered, link tracing is initiated: Establish a set of visited nodes and a queue of nodes to be processed. The set of visited nodes is used to record the visited node elements, and the queue of nodes to be processed is used to store the node elements to be processed. The target primitive is simultaneously added to both the visited node set and the pending queue. Repeat the following process until the queue to be processed is empty: Take a node element from the queue to be processed, use the node identifier attribute of the node element as the query parameter, initiate an attribute query within the container range, and obtain all edge elements whose start point identifier attribute or end point identifier attribute is equal to the query parameter. For each edge primitive obtained, determine the node primitives at both ends of the edge primitive and judge them respectively. If the node primitives at the ends are already in the visited node set, skip them; otherwise, add the node primitives at the ends to the visited node set and push them into the waiting queue. When the queue to be processed is empty, the association set is expanded to include all node primitives and edge primitives reachable from the target primitive. When the preset auxiliary key is released, the association set is restored to the association set when the pointer is only hovering over the target primitive.

[0016] Furthermore, during link tracing, the attribute query simultaneously matches both the start-point identifier attribute and the end-point identifier attribute, enabling link tracing to cover the upstream and downstream links in a single traversal.

[0017] Furthermore, in step S4, when the pointer moves, an anti-flicker detection must be performed first: When the current target primitive is an edge primitive, if the pointer moves into another edge primitive, the reserved marker and status marker are not cleared first. After the pointer enters the other edge primitive, the other edge primitive is taken as the new target primitive and steps S1 to S3 are executed again. The original association set, reserved marker, and status marker are replaced with the newly determined association set, reserved marker, and status marker. If the pointer moves inside the current target primitive, it is considered that the pointer has not left. When the current target element is a node element, if the pointer moves inside the current target element, it is considered that the pointer has not left. Only when none of the above conditions are met, clear all the reserved markers and status markers, restoring each graphic element to its initial appearance.

[0018] Furthermore, the periodic brightness change only applies to the visible lines of the edge primitives in the association set, and is manifested as a periodic bright and dark segment moving along the path of the visible line from the starting point to the ending point of the path. The visible line is configured as a dashed line. By periodically advancing the dashed line offset, the bright and dark segments move continuously along the path direction. The single advance amount of the dashed line offset is an integer multiple of the dashed line period, so that the beginning and end of adjacent cycles are seamlessly connected.

[0019] A rendering interaction system for hovering and focusing on associated elements in a relationship graph using the above method, characterized in that it includes: The primitive attribute injection module is used to write node identifier attributes for node primitives and start point identifier attributes and end point identifier attributes for edge primitives, so that the adjacency relationship of the relation graph is carried by the rendered primitives themselves, without establishing an adjacency index structure separately. The dual-layer edge primitive construction module is used to construct each edge primitive as a two-layer graphic object. The two-layer graphic objects include a visible line and a hit band that share the same path. The stroke width of the hit band is greater than the stroke width of the visible line. The visible line is configured not to receive pointer events and is only responsible for display. The hit band is configured to be completely transparent and not filled, and only responds to pointer events within its stroke area. The hover hit determination of the edge primitive is only handled by the hit band. The style rule setting module is used to set style rules, which include status markers and selectors. When the status marker exists on the container carrying the primitives with written identification attributes, the style rule takes effect, and the selector adjusts the primitives in the container to match. Otherwise, the style rule does not take effect. The matching adjustment of edge primitives only applies to their visible lines, and the matching adjustment does not change the geometric attributes of any primitive. The association set determination module is used to determine the association set based on the category of the target graph element when the pointer hovers over it: when the target graph element is a node graph element, an attribute query is initiated within the container to obtain all edge graph elements whose start-point or end-point identifier attributes are equal to the node identifier attribute of the node graph element, and the other endpoint node graph element of each edge graph element is determined; when the target graph element is an edge graph element, the node graph elements at both ends of the edge graph element are determined; the association set is composed of the target graph element, the obtained edge graph elements, and the endpoint node graph elements, and graph elements outside the association set are considered unrelated sets; The channel splitting module is used to cause the hover to enter the edge channel when the target primitive is an edge primitive, and to cause the hover to enter the node channel when the target primitive is a node primitive and the pointer hit position does not fall within any edge primitive; at most one of the edge channel and the node channel is active at the same time, and they use different retention flags and status flags respectively. The link traversal module is used to perform a breadth-first traversal through the visited node set and the waiting queue when the target graph element is a node graph element and the preset auxiliary key is pressed when the pointer is hovering. This traversal incorporates all node graph elements and edge graph elements reachable from the target graph element into the association set. When the preset auxiliary key is released, the association set is restored to the association set when only the pointer is hovering over the target graph element. The association set labeling module is used to add retention tags only to primitives in the association set; The status marker switching module is used to add the status marker to the container and to clear all reserved markers and status markers when the pointer moves out of the target graphic element, so that each graphic element is restored to its initial appearance. The anti-flash detection module is used to perform anti-flash detection when the pointer moves: When the current target primitive is an edge primitive, if the pointer moves into another edge primitive, the reserved marker and status marker are not cleared first. After the pointer enters the other edge primitive, the other edge primitive is used as the new target primitive, and the association set, reserved marker, and status marker are redefined to replace the original association set, reserved marker, and status marker; if the pointer moves inside the current target primitive, it is considered that the pointer has not left; when the current target primitive is a node primitive, if the pointer moves inside the current target primitive, it is considered that the pointer has not left; only when none of the above conditions are met, all the reserved markers and status markers are cleared, so that each primitive is restored to its initial appearance. The style rule execution module is used to adjust the elements in the container according to whether the elements have a reserved mark when the status mark exists on the container: reduce the opacity of elements in the irrelevant set, and change at least one of the following for elements in the associated set: brightness, color, label thickness, light emission, and periodic brightness and darkness changes.

[0020] The technical solution provided in this application has the following beneficial effects: 1. By directly embedding adjacency relationships into the attributes of the rendered primitives themselves, and applying attribute queries directly to the current rendering result during interaction, the creation and maintenance of a separate adjacency index is eliminated. Therefore, the query results are naturally consistent with the rendering results, ensuring no synchronization issues and avoiding the additional memory consumption and failure risks associated with synchronizing the index with graph data. Furthermore, the calculation of hover focus is entirely completed within the existing rendering context, without requiring view switching or destroying and rebuilding the rendering context; the viewport position, zoom level, and overall graphics state remain unchanged during interaction.

[0021] 2. Each edge is constructed as a two-layer graphic object sharing the same path: a visible line and a hit zone. The visible line does not receive pointer events; only the transparently widened hit zone handles the hit determination. Therefore, even if the visible width of the line is only one or two pixels, it can be reliably hit and distinguished. Even if the visible line has a dashed flowing animation, the animation gaps will not trigger high-frequency alternation of pointer entry / exit events, thus eliminating flickering and jitter in the focus state mechanism. Combined with anti-flicker detection during pointer movement, the focus switching between edges is not cleared and rebuilt; instead, the new target primitive takes over the focus state, avoiding visual jumps that require full-frame restoration in the middle, resulting in a continuous and stable interaction process.

[0022] 3. This solution uses non-geometric attributes to represent the focus state. Relationship sets are highlighted through color, brightness, label thickness, luminance, and periodic brightness variations, while unrelated sets are weakened by reducing opacity. The geometric attributes of any primitives remain unchanged throughout the process, thus preventing occlusion increments and avoiding layout re-encoding. The image maintains geometric stability during focusing. Furthermore, the method only adds retention markers to each primitive in the relationship set; the downsampling of unrelated sets is passively handled by preset style rules. The amount of write operations is only related to the size of the relationship set and does not increase with the overall image size, ensuring immediate response even on relationship graphs with thousands of elements. Once the state markers are removed, the entire focus rule set becomes invalid, and all primitives are automatically and losslessly restored, leaving no residual state.

[0023] 4. Two mutually exclusive focus channels, an edge channel and a node channel, are set up, and the degree of reduction in visibility of irrelevant sets is tiered according to the characteristics of the channels. When focusing on edges, irrelevant edges are darkened while irrelevant nodes are preserved as spatial references. When clustering nodes, both edges and nodes are uniformly reduced in visibility to maintain the overall sense of the neighborhood, making the visual hierarchy under different focus semantics more in line with the user's map reading needs. In addition, holding down the auxiliary key will initiate a bidirectional breadth-first traversal from the current node, covering upstream and downstream reachable links in one traversal. Users can quickly view directly related primitives and trace the entire dependent link as needed, taking into account both local focus and global map reading scenarios. Attached Figure Description

[0024] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.

[0025] Figure 1 This is a schematic diagram of the module architecture and signal transmission of the rendering interaction system for hovering and focusing on associated elements in the relationship diagram in the embodiment. Figure 2 This is a schematic diagram of the interaction flow of hovering and focusing on related elements in the relationship graph in the embodiment. Detailed Implementation

[0026] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0027] Terminology Explanation 1. Primitive: A basic graphic object rendered in a graphics container. In this invention, it includes node primitives and edge primitives.

[0028] 2. Node element: A graphical object representing a node in the relationship graph, carrying a node identifier attribute. The node identifier attribute records the identifier of the node element.

[0029] 3. Edge primitive: Represents a graphical object of an edge in the relationship graph; that is, one edge corresponds to one edge primitive. Each edge primitive consists of two layers of graphical objects, including the visible line and the hit zone that share the same path. The edge primitive carries a start-point identifier attribute and an end-point identifier attribute, which record the identifiers of the start node and the end node of the edge, respectively.

[0030] 4. Visible Line: A layer of graphic objects within the edge primitives responsible for display, possessing a visible stroke color and stroke width. In this embodiment, the visible line is configured not to receive pointer events, but only to be displayed. In focus mode, the visible line can be subject to visual adjustments such as color changes and brightness variations.

[0031] 5. Hit Zone: A layer of graphic objects in the edge primitives responsible for hit detection. It shares the same path as the visible lines, is configured to be completely transparent and unfilled, and its stroke width is significantly larger than the stroke width of the visible lines (in this example, the visible line width is 1-2 pixels, and the hit zone width is 14 pixels). The hit zone only responds to pointer events within its stroke area, and hover hit determination is solely handled by the hit zone. In this example, the pointer events of the visible lines are configured not to respond to any pointer events, the pointer events of the hit zone are configured to only respond to events within its stroke area, and the hit zone is not filled.

[0032] 6. Container: Used to hold primitives with written identification attributes (i.e. rendered primitives). Status markers are added to this container, and attribute queries are initiated within the scope of this container.

[0033] 7. Attribute Query: Using a specific identifier attribute as the query parameter, this function searches the primitive collection for primitives whose identifier attribute is equal to the query parameter. Attribute queries operate directly on the currently rendered primitive collection and do not rely on any additional index structure; the query operation can be handled by the rendering engine.

[0034] 8. Association Set: The set of graph elements that are determined to be directly associated with the target graph element (or reachable in link tracing mode) during a single hover. When hovering over a node graph element, the association set includes the node graph element, all edge graph elements directly connected to the node, and the other endpoint node graph elements of each edge graph element; when hovering over an edge graph element, the association set includes the edge graph element and the node graph elements at both ends of it; during link tracing, the association set expands to include all node graph elements and edge graph elements reachable from the target graph element.

[0035] 9. Unrelated set: A collection of primitives other than the associated set. This method does not traverse or modify the properties of the unrelated set; its visual changes are passively generated by style rules.

[0036] 10. Reserved Marker: A marker added to elements of an association set to identify that the element belongs to the association set. Reserved markers are added during interaction and cleared when the pointer moves out or the focus switches.

[0037] 11. Status markers: Markers added to containers to control whether focus style rules are in effect.

[0038] 12. Edge Channel / Node Channel: Two mutually exclusive focus channels. The pointer enters the edge channel when it hits an edge primitive; the pointer enters the node channel when it hits a node primitive and the hit position does not fall within any edge primitive. At most one of the two channels can be active at any given time, and they use different retention flags and status flags respectively.

[0039] 13. Auxiliary key: A preset key used to trigger link tracing. In this embodiment, it is the Alt key on the keyboard.

[0040] 14. Visited Node Set / Pending Queue: Two data structures used in link tracing. The visited node set records visited node elements to avoid repeated traversal and ensure that traversal on a graph containing cycles will always terminate; the pending queue stores node elements to be processed, using a first-in-first-out (FIFO) approach to ensure outward expansion layer by layer.

[0041] 15. Style Rules: A set of preset rules consisting of status markers and selectors. This set of rules is active when a status marker exists on the container; it is inactive when no status marker exists. Style rules are not added or deleted during interaction; their effectiveness is controlled solely by the presence or absence of status markers.

[0042] 16. Selector: The matching adjustment part of the style rule, used to determine the target of the rule based on whether the graphic element has a reserved mark. For graphic elements without a reserved mark, the opacity is reduced, and for graphic elements with a reserved mark, at least one of the following is changed: brightness, color, label thickness, glow, and periodic brightness variation.

[0043] 17. Link tracing mode: also known as breadth-first traversal (BFS), which is started when the target graph element is a node graph element and the preset auxiliary key is pressed. It is used to expand the association set to all node graph elements and edge graph elements that can be reached from the target graph element. Since the attribute query matches both the start and end points at the same time, a single traversal covers the upstream and downstream links.

[0044] Example 1 (Rendering Method) like Figure 1 As shown in the rendering stage, this embodiment provides a rendering method for hovering and focusing on related elements in a relationship graph, including the following process.

[0045] During the graphics rendering stage, node identifier attributes are written to node primitives, and start-point and end-point identifier attributes are written to edge primitives, so that the adjacency relationship of the graph is carried by the rendered primitives themselves, without establishing a separate adjacency index structure.

[0046] For example, node primitives A, B, C, and D are each assigned their own node identifier attributes, A, B, C, and D respectively. Edge primitives A→B are assigned the starting point identifier attribute A and the ending point identifier attribute B; edge primitives A→C are assigned the starting point identifier attribute A and the ending point identifier attribute C; edge primitives B→D are assigned the starting point identifier attribute B and the ending point identifier attribute D, and so on. In this way, the adjacency information in the graph (which nodes are connected by which edges) is distributed and encoded in the attributes of each primitive itself. Attribute queries directly apply to the currently rendered primitive set, and the query result is always consistent with the rendering result. There is no issue of index and rendering result misalignment, nor is there any additional index memory usage. Furthermore, on graphs with thousands of elements, a single attribute query can be completed synchronously by the rendering engine within a pointer event callback, providing an immediate response.

[0047] Each edge primitive is constructed as a two-layer graphic object, comprising a visible line and a hit band sharing the same path. The stroke width of the hit band is greater than that of the visible line. In this embodiment, the stroke width of the visible line is 1-2 pixels, and the stroke width of the hit band is 14 pixels. The visible line is configured not to receive pointer events and is only responsible for display; the hit band is configured to be completely transparent and unfilled, and only responds to pointer events within its stroke area; hover hit determination of the edge primitive is handled solely by the hit band.

[0048] Since the two graphic objects share the same path, their geometry is exactly the same; the hit zone is a continuous, gapless, and significantly widened transparent stroke, so even if the visible line is only 1 to 2 pixels wide, it can be stably hit and distinguished; even if the visible line has a dashed flowing animation, the animation gap will not cause high-frequency alternation of pointer entry / exit events, and the hit determination is stable.

[0049] Because the responsibilities of the two graphic objects mentioned above are separated, the visual adjustment during the focusing process only applies to the visible lines. The hit zone always maintains a continuous and complete hit determination capability, ensuring stable hits in densely connected scenes without generating any occlusion increments.

[0050] Finally, style rules need to be set. In this embodiment, style rules include status markers and selectors. When a status marker exists on the container carrying primitives with written identification attributes, the style rule takes effect, and the selector adjusts the primitives within the container to match them; otherwise, the style rule does not take effect. The matching adjustment of edge primitives only applies to their visible lines, and the matching adjustment does not change the geometric properties of any primitive.

[0051] In this embodiment, style rules are declared once in the form of a style sheet when the page loads. They are neither added nor deleted during interaction; their effectiveness is controlled solely by the presence or absence of status markers on the container. Status markers are added to the container element in the form of preset identifiers.

[0052] Furthermore, the selector matches and adjusts the primitives within the container, including the following process: determining whether the primitives within the container have a reserved marker, which is added during the interaction process to identify the primitive targeted by the hover and its directly associated primitives; reducing the opacity of primitives without a reserved marker, and changing at least one of the following for primitives with a reserved marker: brightness, color, label thickness, luminance, and periodic brightness / darkness changes.

[0053] All effects of the above rules are automatically completed by the rendering engine when the rules take effect, without changing the geometric properties of any primitives or triggering a re-layout; once the state marker is removed, the all-focus rule becomes invalid, all primitives are automatically restored, and there are no residual states.

[0054] Example 2 (Interactive Method) refer to Figure 1 The interactive phases shown and Figure 2 This embodiment provides an interaction method for hovering and focusing on related elements in a relationship graph based on the above rendering method, including the following process.

[0055] Step S1: When the rendering engine detects that the pointer is hovering over the target primitive, it needs to first determine whether the target primitive is a node primitive or an edge primitive. At the same time, based on the determined primitive type, this embodiment implements hovering traffic splitting by setting channel splitting. The specific process is as follows: When the target primitive is an edge primitive, this hovering operation enters the edge channel; When the target primitive is a node primitive and the pointer hit position does not fall within any edge primitive, this hover enters the node channel; At most one of the edge channel and node channel is active at any given time, and each uses different retention and status markers to avoid triggering two sets of marking and style rules for the same hover, ensuring that at most one focus effect is active at any given time, and that the visual states of the two channels do not overlap.

[0056] After hovering and traffic splitting, the association set is established, and the specific process is as follows: When the target graph element is a node graph element, the node identifier attribute of the node graph element is used as the query parameter. An attribute query is initiated within the container range to obtain all edge graph elements whose start-point identifier attribute or end-point identifier attribute is equal to the query parameter. The node graph elements at the other end of each obtained edge graph element are determined. The target graph element, the obtained edge graph elements and the node graph elements at the other end constitute an association set. When the target primitive is an edge primitive, the node primitives at both ends of the edge primitive are determined, and the target primitive and the node primitives at both ends constitute an association set.

[0057] Primitives outside of the associated set are defined as the unrelated set.

[0058] For example, when a user hovers the pointer over node primitive A, the attribute query uses the node identifier attribute A as the query parameter. Within the container, it matches edge primitives A→B and A→C whose start or end identifier attributes are equal to A. Then, it reads the identifiers of the other endpoints of these two edge primitives to obtain node primitives B and C. The association set is then {A, A→B, A→C, B, C}. The entire process described above is completed within the existing rendering context, and the viewport position, scaling level, and overall graphic state remain unchanged.

[0059] Step S2: Add a retention marker only to the primitives in the association set, and add a status marker to the container.

[0060] In this embodiment, a retention flag is added to each primitive in the association set, and a status flag is added to the container element. Primitives in the unrelated set are not traversed, and the attributes of any primitives in the unrelated set are not modified. The visual changes of the unrelated set are passively generated by the style rules. Therefore, the number of write operations on primitives in each interaction is only related to the size of the association set and does not increase with the size of the entire graph, ensuring immediate response even with thousands of elements.

[0061] Step S3: When a status marker exists on the container, the style rules take effect. The selector adjusts the elements within the container based on whether the elements have a reserved marker. Specifically, it reduces the opacity of elements in the irrelevant set and changes at least one of the following: brightness, color, label thickness, glow, and periodic brightness / darkness changes for elements in the associated set.

[0062] Continuing with the example in step S1, the association set is {A, A→B, A→C, B, C}. After adding state markers to the container, the style rules automatically reduce the opacity of irrelevant primitives without retention markers (such as edge primitive B→D, node primitive D, etc.); and apply effects such as outer glow, color change, and light and shadow flow to the associated primitives with retention markers (A, B, C, A→B, A→C). The entire process is completed by the rendering engine, without requiring modification of attributes for each primitive. Moreover, all adjustments do not change the geometric attributes of the primitives, ensuring geometric stability of the image during focusing, with no occlusion increments.

[0063] Taking a node channel as an example, the style rules set in the embodiment have the following effects: when there is a status marker on the container, the opacity of node primitives without the reserved marker and edge primitives is uniformly reduced to 0.3, with a transition effect of 0.15 seconds; node primitives with the reserved marker present an outer glow effect; edge primitives with the reserved marker change color and present a change in brightness along the path direction.

[0064] Taking the edge channel as an example, the style rules set in the embodiment have the following effects: When there is a status marker on the container, the opacity of the node primitive without the reserved marker is reduced to 0.35, the opacity of the edge primitive without the reserved marker is reduced to 0.1, and a transition effect of 0.15 seconds is added; the node primitive with the reserved marker presents an outer glow effect; the edge primitive with the reserved marker changes color and makes its label bold, while presenting a change in brightness along the path direction.

[0065] All of the above effects are automatically achieved by the rendering engine through style rules, without changing the geometric properties of any primitives or triggering a re-layout; once the state marker is removed, the all-focus rule becomes invalid, all primitives are automatically restored, and there are no residual states.

[0066] Step S4: After the pointer moves out of the target graphic element, clear all added retention marks and status marks to restore each graphic element to its initial appearance.

[0067] Preferably, in this embodiment, when the pointer moves, an anti-flicker determination is also required, as follows: When the current target primitive is an edge primitive, if the pointer moves into another edge primitive, the reserved flag and status flag are not cleared first. After the pointer enters another edge primitive, the other edge primitive is taken as the new target primitive and steps S1 to S3 are executed again. The original association set, reserved flag, and status flag are replaced with the newly determined association set, reserved flag, and status flag. If the pointer moves inside the current target primitive (i.e., edge primitive), it is considered that the pointer has not left. When the current target element is a node element, if the pointer moves inside the current target element, it is considered that the pointer has not left. Only when none of the above conditions are met will all reserved markers and status markers be cleared, restoring each graphic element to its initial appearance.

[0068] In this embodiment, the edge primitive includes sub-elements such as visible lines, hit bands, and edge labels; the node primitive includes sub-elements such as node text and icons. When the pointer moves between these sub-elements, although a move-out / move-in event occurs for a single sub-element, the pointer does not leave the entire primitive, and is therefore considered not to have left. When the pointer moves from one edge to another, the old edge primitive's mark is not cleared first. Instead, steps S1 to S3 are re-executed after the new edge primitive's entry event is triggered. The new association set, the new retained mark, and the new state mark directly replace the old state, avoiding flickering during a full frame restoration. Thus, the focus state during pointer interaction is always continuous, without jumps or flickering.

[0069] It should be noted that this anti-flicker determination differs fundamentally from the existing scheme in the background technology that delays the highlight response by setting a time threshold: the anti-flicker determination process does not introduce any time waiting, but instead makes an immediate structural determination based on whether the pointer's position still belongs to the current target primitive or to another edge primitive, eliminating jitter without sacrificing responsiveness. Furthermore, the hit jitter caused by gaps in the connection animation is eliminated at the rendering layer in this embodiment (visible lines do not receive pointer events, and the hit determination is entirely handled by the gapless transparent hit band), while the time threshold scheme mentioned in the background technology can only mask this jitter with a delay, and cannot eliminate it from a mechanistic perspective.

[0070] As illustrated in the examples of style rule effects above, in this embodiment, the edge channel and node channel differentiate the degree of opacity reduction for irrelevant set primitives. In the edge channel, the reduction in opacity for edge primitives in the irrelevant set is greater than that for node primitives; in the node channel, the reduction in opacity for edge primitives and node primitives in the irrelevant set is the same. In the edge channel, the reason for reducing the opacity of edge primitives in the irrelevant set is that in edge-focused scenarios, users are concerned with where the edge leads, and edge primitives in the irrelevant set need to be minimized from view, while node primitives retain some recognizability to serve as spatial references. In the node channel, the opacity of edge primitives and node primitives in the irrelevant set is uniformly reduced because in node-clustered scenarios, users are concerned with a whole neighborhood, and the uniform readability of the neighborhood structure needs to be preserved. Therefore, this differentiation makes the visual hierarchy under different focus semantics more aligned with the user's image reading needs.

[0071] Furthermore, this embodiment also sets a link tracing mode. In step S1, when the target primitive is a node primitive and the preset auxiliary key is pressed when the pointer is hovered, link tracing (i.e., breadth-first traversal, also known as BFS) is started, which specifically includes the following process: Establish a set of visited nodes and a queue of nodes to be processed. The set of visited nodes is used to record the node elements that have been visited, and the queue of nodes to be processed is used to store the node elements to be processed. Add the target primitive to both the visited node set and the pending queue; Repeat the following two processes (1) and (2) until the queue to be processed is empty: (1) Take a node element from the queue to be processed, use the node identifier attribute of the node element as the query parameter, initiate an attribute query within the container range, and obtain all edge elements whose start point identifier attribute or end point identifier attribute is equal to the query parameter. (2) For each edge primitive obtained, determine the node primitives at both ends of the edge primitive and judge them respectively. If the node primitive at the end is already in the set of visited nodes, skip it; otherwise, add the node primitive at the end to the set of visited nodes and push it into the queue to be processed. When the queue to be processed is empty, the association set is expanded to include all node and edge elements reachable from the target element, thus completing the link tracing.

[0072] When the preset auxiliary key is released, the association set is restored to the association set when the pointer is only hovering over the target primitive.

[0073] During link tracing, since attribute queries match both the start and end point attributes simultaneously, a single traversal starting from any node can retrieve both its outgoing and incoming edges. A single traversal covers the upstream and downstream links, eliminating the need for two separate executions. The set of visited nodes ensures that traversal on a cycle graph will inevitably terminate, and each node is processed at most once, thus achieving bidirectional link tracing. With link tracing, users can see the entire reachable link without switching views, maintaining the same visible range and graphical layout.

[0074] In this embodiment, the auxiliary key is the Alt key. For example, starting from node A, the queue to be processed is initially [A], and the visited set is {A}. A is retrieved, and attribute queries reveal edges A→B and A→C. Endpoints B and C are not visited, so they are added to the set and queued. B is retrieved, and attribute queries reveal edge B→D. Endpoint D is not visited, so it is added to the set and queued. After retrieving C and D, no new edges are added, the queue is empty, and the association set expands to {A, B, C, D, A→B, A→C, B→D}. The upstream and downstream of A are fully covered in a single traversal, allowing the user to see the entire reachable link without switching views, and the visible range and graphic layout remain unchanged. After releasing the auxiliary key, the association set reverts to the association set {A, A→B, A→C, B, C} when only A is hovered over. Subsequently, a retention flag is added to this association set according to step S2, and a status flag is added to the container.

[0075] As an improvement, in this embodiment, the periodic brightness change only applies to the visible lines of the edge primitives in the association set, and is manifested as a periodic movement of bright and dark segments along the path of the visible line from the starting point to the ending point of the path, as follows: the visible line is configured as a dashed line, and the bright and dark segments move continuously along the path direction by periodically advancing the dashed line offset; the single advance amount of the dashed line offset is an integer multiple of the dashed line period, so that the beginning and end of adjacent cycle periods are seamlessly connected.

[0076] For example, the visible dashed line configuration has a solid line segment length to spacing ratio of 9:6 and a dashed line period of 15. The animation linearly advances the dashed line offset from 0 to -30 within 0.65 seconds and loops infinitely. The offset of -30 is exactly -2 times the period of 15, so the dashed line shape at the beginning of each loop is completely consistent, with seamless transitions and no jumps. Throughout the animation, only the dashed line offset, a rendering-period attribute, is changed; the line width and path geometry are not altered, no re-layout is triggered, and no occlusion increments are generated. This effect guides the eye with a visual cue that flows continuously along the path, without occupying additional display space in dense graphics. The node primitives are not subject to this light and shadow flow effect; their focus and highlight are achieved using external glow.

[0077] Example 3 (System Architecture) refer to Figure 1 This embodiment provides a rendering interaction system for hovering and focusing on related elements in the above relationship graph, including the following modules: The primitive attribute injection module is used to write node identifier attributes for node primitives and start-point and end-point identifier attributes for edge primitives. This allows the adjacency relationships of the graph to be carried within the rendered primitives themselves, without establishing a separate adjacency index structure. This module operates during the rendering phase, corresponding to the identifier attribute writing process in the rendering method described above.

[0078] The dual-layer edge primitive construction module is used to construct each edge primitive as a two-layer graphic object. These two layers include a visible line and a hit zone sharing the same path. The stroke width of the hit zone is greater than the stroke width of the visible line. The visible line is configured not to receive pointer events and is only responsible for display. The hit zone is configured to be completely transparent and unfilled, and only responds to pointer events within its stroke area. Hover hit determination of the edge primitive is handled solely by the hit zone. This module operates during the rendering phase, corresponding to the dual-layer edge primitive construction process described in the rendering method above.

[0079] The style rule setting module is used to set style rules, which include status markers and selectors. When a status marker exists on the container holding primitives with written identifier attributes, the style rule takes effect, and the selector adjusts the primitives within the container to match the status. Otherwise, the style rule does not take effect. Matching adjustments for edge primitives only apply to their visible lines, and the matching adjustment does not change the geometric properties of any primitive. This module presets style rules during the rendering phase; rules are not added or deleted during the interaction phase.

[0080] The association set determination module is used to determine the association set based on the category of the target graph element when the pointer hovers over it: When the target graph element is a node graph element, an attribute query is initiated within the container scope to obtain all edge graph elements whose start-point identifier attribute or end-point identifier attribute is equal to the node identifier attribute of the node graph element, and the other endpoint node graph element of each edge graph element is determined; When the target graph element is an edge graph element, the node graph elements at both ends of the edge graph element are determined; The association set is composed of the target graph element, the obtained edge graph elements, and the endpoint node graph elements, and the graph elements outside the association set are unrelated sets.

[0081] The channel splitting module is used to cause the hover to enter the edge channel when the target primitive is an edge primitive, and to cause the hover to enter the node channel when the target primitive is a node primitive and the pointer hit position does not fall within any edge primitive. At most one edge channel and one node channel can be active at the same time, and they use different retention flags and status flags respectively.

[0082] The link traversal module is used to perform a breadth-first traversal through the visited node set and the waiting queue when the target graph element is a node graph element and the preset auxiliary key is pressed when the pointer is hovering. It merges all node graph elements and edge graph elements reachable from the target graph element into the association set. When the preset auxiliary key is released, the association set is restored to the association set when only the pointer is hovering over the target graph element.

[0083] The association set labeling module is used to add reserved labels only to primitives in the association set.

[0084] The status marker switching module is used to add status markers to containers and to clear all reserved markers and status markers when the pointer moves out of the target primitive, so that each primitive is restored to its initial appearance.

[0085] The anti-flash detection module is used to perform anti-flash detection when the pointer moves: When the current target primitive is an edge primitive, if the pointer moves into another edge primitive, the reserved marker and status marker are not cleared first. After the pointer enters another edge primitive, the other edge primitive is taken as the new target primitive, and the association set, reserved marker, and status marker are redefined to replace the original association set, reserved marker, and status marker; if the pointer moves inside the current target primitive, it is considered that the pointer has not left; when the current target primitive is a node primitive, if the pointer moves inside the current target primitive, it is considered that the pointer has not left; only when none of the above conditions are met, all reserved markers and status markers are cleared, so that each primitive is restored to its initial appearance.

[0086] The style rule execution module is used to match and adjust the elements in the container based on whether the elements have a reserved mark when there is a status mark on the container: reduce the opacity of elements in the irrelevant set, and change at least one of the following for elements in the associated set: brightness, color, label thickness, glow, and periodic brightness and darkness.

[0087] Application Cases Case 1: Real-time Focusing on Hovering Nodes In a process modeling tool, the user hovers the pointer over the active node A. The system enters the node channel through channel splitting. The association set determination module initiates an attribute query using the node identifier attribute A as the query parameter, obtaining the connected edges A→B and A→C, and the peer nodes B and C. The association set is {A, A→B, A→C, B, C}. The association set labeling module adds a retention mark only to these five primitives, and the state mark switching module adds a state mark to the container. The style rule execution module then takes effect: the opacity of the edge primitive B→D and unrelated primitives such as node primitive D is uniformly reduced to 0.3, with a 0.15-second transition effect; the associated nodes A, B, and C exhibit an outer glow effect; and the associated edges A→B and A→C change color and exhibit a flowing light and dark change along the path.

[0088] Users can clearly see the direct association of A without switching views or waiting, and the viewport position, zoom level, and overall graphic state remain unchanged. After the pointer is moved away, the reserved markers and status markers are cleared, and all primitives are smoothly restored to their initial appearance without any residual state.

[0089] Case Study 2: Stable Hit Rate in Densely Connected Lines In areas where lines overlap densely, users can hover over a specific thin line (visible line width 1-2 pixels). Since each edge primitive is configured with a 14-pixel-wide transparent hit band, hit detection is handled solely by the hit band, and the pointer does not need to land precisely on the thin line to hit the target edge; even if the edge is playing a light and dark flow animation (light and dark segments flow along the path direction), the hit band is continuous without gaps, and there are no alternating entry / exit events, resulting in a stable focus state without flickering.

[0090] When the user moves the pointer from one edge to another adjacent edge, the anti-flicker determination module detects that the movement direction is within another edge element. Instead of clearing the current mark, it waits for the new edge element to enter and then re-executes steps S1 to S3 with the new edge element as the new target element. The newly determined association set, retained mark, and status mark directly replace the original state. The interaction process is continuous, without jumps or flickering.

[0091] Case 3: Hold down the Alt key to follow the entire chain When the user holds down the Alt key and hovers the pointer over node B, the system enters link tracing mode. The initial set of visited nodes and the queue of nodes to be processed are both {B}. B is removed, and its attributes are checked to find edges A→B and B→D. Endpoints A and D are not visited, so they are added to the set and queued. A is removed, and its attributes are checked to find edge A→C. Endpoint C is not visited, so it is added to the set and queued. Then C and D are removed sequentially. No new nodes are added, and the queue is empty. The association set is expanded to include all nodes and edges reachable from B: {B, A, D, C, A→B, B→D, A→C}.

[0092] Because the attribute query matches both the start and end points, the upstream (A, C) and downstream (D) of B are fully covered in a single traversal. Users can see the entire reachable link without switching views, and the visible range and graphic layout remain unchanged.

[0093] After releasing the Alt key, the association set is restored to the association set {B, A, D, A→B, B→D} when only B is hovered. Then, step S2 adds a retention flag to the association set and adds a state flag to the container.

[0094] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as the combination of these technical features does not contradict each other, it should be considered within the scope of this specification. Furthermore, the above embodiments only illustrate several implementation methods of the present invention, and their descriptions are relatively specific and detailed, but they should not be construed as limiting the scope of the present invention. For those skilled in the art, several modifications and improvements can be made, and these all fall within the protection scope of the present invention.

Claims

1. A rendering method for hovering and focusing on related elements in a relationship graph, characterized in that, Includes the following processes: Write node identifier attributes to node primitives and start point identifier attributes and end point identifier attributes to edge primitives, so that the adjacency relationship of the relation graph is carried by the rendered primitives themselves, without establishing an adjacency index structure separately. The edge primitive is constructed as a two-layer graphic object. The two-layer graphic object includes a visible line and a hit band that share the same path. The stroke width of the hit band is greater than the stroke width of the visible line. The visible line is configured not to receive pointer events and is only responsible for display. The hit band is configured to be completely transparent and not filled, and only responds to pointer events within its stroke area. The hover hit determination of the edge primitive is only undertaken by the hit band. Set style rules, which include status flags and selectors; When the status marker exists on the container that carries the graphic element with the written identification attribute, the style rule takes effect, and the selector adjusts the graphic element within the container accordingly; otherwise, the style rule does not take effect. Among them, the matching adjustment of edge primitives only applies to their visible lines, and the matching adjustment does not change the geometric properties of any primitive.

2. The rendering method for hovering and focusing on related elements in a relationship graph as described in claim 1, characterized in that, The selector adjusts the matching of the primitives within the container. Includes the following processes: Determine whether the graphic elements within the container have a reserved marker. The reserved marker is added during the interaction process and is used to identify the graphic element targeted by the hover and its associated graphic elements. Reduce the opacity of primitives that do not have the reserved mark, and change at least one of the following for primitives that have the reserved mark: brightness, color, label thickness, luminance, and periodic brightness variation.

3. An interactive method for hovering and focusing on associated elements in a relationship graph based on the rendering method of any one of claims 1 to 2, characterized in that, Includes the following processes: Step S1: Hover the pointer over the target primitive; When the target element is a node element, the node identifier attribute of the node element is used as the query parameter to initiate an attribute query within the container range, obtain all edge elements whose start point identifier attribute or end point identifier attribute is equal to the query parameter, and determine the node element at the other end of each obtained edge element. The target primitive, the obtained edge primitive, and the node primitive at the other end constitute an association set; When the target primitive is an edge primitive, the node primitives at both ends of the edge primitive are determined; the target primitive and the node primitives at both ends constitute an association set; Primitives outside the associated set are defined as irrelevant sets; Step S2: Add a retention mark only to the primitives in the association set, and add the status mark to the container; Step S3: When there is a status marker on the container, the style rule takes effect. The selector adjusts the elements in the container according to whether the elements have a reserved marker. That is, it reduces the opacity of elements in the irrelevant set and changes at least one of the following: brightness, color, label thickness, light emission, and periodic brightness and darkness changes for elements in the associated set. Step S4: After the pointer moves out of the target graphic element, clear all added retention marks and status marks to restore each graphic element to its initial appearance.

4. The interactive method for hovering and focusing on related elements in a relationship graph as described in claim 3, characterized in that, In step S1, hovering traffic splitting is achieved by setting edge channels and node channels: When the target primitive is an edge primitive, this hovering operation enters the edge channel; When the target primitive is a node primitive and the pointer hit position does not fall within any edge primitive, the hover enters the node channel. At most one of the edge channels and node channels is active at any given time, and each uses a different retention flag and status flag.

5. The interactive method for hovering and focusing on related elements in a relationship graph as described in claim 4, characterized in that, The edge and node channels are tiered to reduce the opacity of unrelated set primitives to different levels: In edge channels, the reduction in edge primitives of irrelevant sets is greater than that of node primitives of irrelevant sets; In the node channel, the reduction in edge primitives of the irrelevant set is the same as that of node primitives of the irrelevant set.

6. The interactive method for hovering and focusing on related elements in a relationship graph as described in claim 3, characterized in that, In step S1, when the target primitive is a node primitive and the preset auxiliary key is pressed when the pointer is hovered, link tracing is initiated: Establish a set of visited nodes and a queue of nodes to be processed. The set of visited nodes is used to record the visited node elements, and the queue of nodes to be processed is used to store the node elements to be processed. The target primitive is simultaneously added to both the visited node set and the pending queue. Repeat the following process until the queue to be processed is empty: Take a node element from the queue to be processed, use the node identifier attribute of the node element as the query parameter, initiate an attribute query within the container range, and obtain all edge elements whose start point identifier attribute or end point identifier attribute is equal to the query parameter. For each edge primitive obtained, determine the node primitives at both ends of the edge primitive and judge them respectively. If the node primitives at the ends are already in the visited node set, skip them; otherwise, add the node primitives at the ends to the visited node set and push them into the waiting queue. When the queue to be processed is empty, the association set is expanded to include all node primitives and edge primitives reachable from the target primitive. When the preset auxiliary key is released, the association set is restored to the association set when the pointer is only hovering over the target primitive.

7. The interactive method for hovering and focusing on related elements in a relationship graph as described in claim 6, characterized in that, During link tracing, the attribute query matches both the start-point identifier attribute and the end-point identifier attribute, enabling link tracing to cover the upstream and downstream links in a single traversal.

8. The interactive method for hovering and focusing on related elements in a relationship graph as described in claim 3, characterized in that, In step S4, when the pointer moves, a flashback detection must be performed first: When the current target primitive is an edge primitive, if the pointer moves into another edge primitive, the reserved marker and status marker are not cleared first. After the pointer enters the other edge primitive, the other edge primitive is taken as the new target primitive and steps S1 to S3 are executed again. The original association set, reserved marker, and status marker are replaced with the newly determined association set, reserved marker, and status marker. If the pointer moves inside the current target primitive, it is considered that the pointer has not left. When the current target element is a node element, if the pointer moves inside the current target element, it is considered that the pointer has not left. Only when none of the above conditions are met, clear all the reserved markers and status markers, restoring each graphic element to its initial appearance.

9. The interactive method for hovering and focusing on related elements in a relationship graph as described in claim 3, characterized in that, The periodic brightness changes only apply to the visible lines of the edge primitives in the association set, and are manifested as bright and dark segments that move periodically along the path of the visible line from the starting point to the ending point of the path. The visible line is configured as a dashed line. By periodically advancing the dashed line offset, the bright and dark segments move continuously along the path direction. The single advance amount of the dashed line offset is an integer multiple of the dashed line period, so that the beginning and end of adjacent cycles are seamlessly connected.

10. A rendering interaction system for hovering and focusing on associated elements in a relationship graph using the method of any one of claims 3 to 9, characterized in that, include: The primitive attribute injection module is used to write node identifier attributes for node primitives and start point identifier attributes and end point identifier attributes for edge primitives, so that the adjacency relationship of the relation graph is carried by the rendered primitives themselves, without establishing an adjacency index structure separately. The dual-layer edge primitive construction module is used to construct each edge primitive as a two-layer graphic object. The two-layer graphic objects include a visible line and a hit band that share the same path. The stroke width of the hit band is greater than the stroke width of the visible line. The visible line is configured not to receive pointer events and is only responsible for display. The hit band is configured to be completely transparent and not filled, and only responds to pointer events within its stroke area. The hover hit determination of the edge primitive is only handled by the hit band. The style rule setting module is used to set style rules, which include status flags and selectors; When the status marker is present on the container carrying the primitives whose identification attributes have been written, the style rule takes effect, and the selector adjusts the primitives within the container to match; otherwise, the style rule does not take effect; wherein, the matching adjustment of edge primitives only applies to their visible lines, and the matching adjustment does not change the geometric attributes of any primitive. The association set determination module is used to determine the association set based on the category of the target graph element when the pointer hovers over it: when the target graph element is a node graph element, an attribute query is initiated within the container to obtain all edge graph elements whose start-point or end-point identifier attributes are equal to the node identifier attribute of the node graph element, and the other endpoint node graph element of each edge graph element is determined; when the target graph element is an edge graph element, the node graph elements at both ends of the edge graph element are determined; the association set is composed of the target graph element, the obtained edge graph elements, and the endpoint node graph elements, and graph elements outside the association set are considered unrelated sets; The channel splitting module is used to cause the hover to enter the edge channel when the target primitive is an edge primitive, and to cause the hover to enter the node channel when the target primitive is a node primitive and the pointer hit position does not fall within any edge primitive; at most one of the edge channel and the node channel is active at the same time, and they use different retention flags and status flags respectively. The link traversal module is used to perform a breadth-first traversal through the visited node set and the waiting queue when the target graph element is a node graph element and the preset auxiliary key is pressed when the pointer is hovering. This traversal incorporates all node graph elements and edge graph elements reachable from the target graph element into the association set. When the preset auxiliary key is released, the association set is restored to the association set when only the pointer is hovering over the target graph element. The association set labeling module is used to add retention tags only to primitives in the association set; The status marker switching module is used to add the status marker to the container and to clear all reserved markers and status markers when the pointer moves out of the target graphic element, so that each graphic element is restored to its initial appearance. The anti-flash detection module is used to perform anti-flash detection when the pointer moves: When the current target primitive is an edge primitive, if the pointer moves into another edge primitive, the reserved marker and status marker are not cleared first. After the pointer enters the other edge primitive, the other edge primitive is used as the new target primitive, and the association set, reserved marker, and status marker are redefined to replace the original association set, reserved marker, and status marker; if the pointer moves inside the current target primitive, it is considered that the pointer has not left; when the current target primitive is a node primitive, if the pointer moves inside the current target primitive, it is considered that the pointer has not left; only when none of the above conditions are met, all the reserved markers and status markers are cleared, so that each primitive is restored to its initial appearance. The style rule execution module is used to adjust the elements in the container according to whether the elements have a reserved mark when the status mark exists on the container: reduce the opacity of elements in the irrelevant set, and change at least one of the following for elements in the associated set: brightness, color, label thickness, light emission, and periodic brightness and darkness changes.

Images