A self-defined graph node visualization method based on dynamic rendering of business attributes

Abstract

The application provides a self-defined graph node visualization method based on dynamic rendering of business attributes, receives and verifies a node style configuration in a JSON format, parses an internal model containing a graph definition, a style, a rule and a position, combines node business data, dynamically evaluates whether a graph element is displayed according to the rule, generates a to-be-rendered set, and finally performs layered rendering, i.e., first drawing a basic shape and a style, then rendering a dynamic element meeting a condition in sequence, and completing node drawing. A user only needs to set a rule and a style through a configuration interface without writing drawing code, and the system can automatically and dynamically render the node with rich visual elements according to the business data, thereby greatly improving the expressiveness and development efficiency of graph visualization.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of knowledge graph and data visualization, in particular to a self-defined graph node visualization method and system based on dynamic rendering of business attributes. BACKGROUND

[0002] As an efficient knowledge representation and association technology, knowledge graph has been widely used in social network analysis, financial risk control, intelligent recommendation and other fields. In graph visualization, nodes are the basic unit for displaying entity information, and their visual forms directly affect users' understanding efficiency and depth of data.

[0003] At present, common graph visualization technologies mostly rely on open source libraries such as D3.js and ECharts. Although these libraries provide basic node drawing capabilities, their node styles are usually limited to a few predefined shapes (such as circles and rectangles) and fixed style combinations (such as colors and sizes). When the business scenario needs to dynamically adjust the appearance of nodes according to specific attributes of entities (such as user level and risk level), or add custom elements such as badges, icons and text to nodes, existing solutions expose significant shortcomings:

[0004] 1. Style fixation and poor flexibility: The existing node style templates are limited, making it difficult to support complex and varied business display requirements. For example, it is not convenient to dynamically display a badge representing VIP identity at a specific position (such as the upper right corner) of the node.

[0005] 2. High development cost and low efficiency: To achieve personalized node effects, developers need to write a large amount of customized drawing code. Each time the business requirements change, such as adjusting the badge position or adding a new risk identifier, the code needs to be modified, tested and redeployed, which is time-consuming and costly.

[0006] 3. Lack of dynamic response capability: The binding logic of style and business data is hard-coded in the program, which cannot quickly respond to changes in business rules through configuration, resulting in slow product iteration and difficulty in adapting to rapidly developing business needs.

[0007] Therefore, there is an urgent need in the art for a visualization solution that can flexibly define graph node styles and dynamically render them based on business attributes through a configuration-based approach, to reduce the development threshold and improve development efficiency and visualization performance. SUMMARY

[0008] The present application aims to overcome the shortcomings of the prior art and provide a self-defined graph node visualization method and system based on dynamic rendering of business attributes. This method can flexibly define and dynamically render graph node styles through configuration rather than coding, significantly reducing development complexity and improving response speed to business requirements.

[0009] In a first aspect, the application provides a self-defined graph node visualization method based on dynamic rendering of business attributes, comprising:

[0010] receiving node style configuration data in JSON format, verifying the legality of the schema of the node style configuration data, and parsing the legal node style configuration data into an internal object model; the internal object model includes graphic element definition, style attribute, display rule and position information;

[0011] obtaining the business attribute data of the current node, dynamically evaluating the display conditions of each graphic element according to the display rule in the internal object model, and generating a set of graphic elements to be rendered; wherein the display rule supports logical operation and comparison operation on node business attributes;

[0012] sequentially layering rendering the set of graphic elements to be rendered for the current node to realize node drawing; the layering rendering at least includes rendering a basic layer of the basic shape and fixed style of the node first, and then rendering a dynamic element layer that meets the display rule according to the order of the set of graphic elements.

[0013] Further, before sequentially layering rendering the set of graphic elements to be rendered for the current node, the method further comprises a coordinate conversion step: in the Canvas drawing environment, for the current node to be rendered, performing a coordinate transformation operation to translate the origin of the global coordinate system of the drawing environment to the center point of the node, and establishing a local coordinate system with the node as the center;

[0014] The sequentially layering rendering of the set of graphic elements to be rendered for the current node comprises: sequentially rendering the set of graphic elements to be rendered in the local coordinate system; and after completing the rendering of all graphic elements of the current node, restoring the global coordinate system of the Canvas drawing environment to the state before the coordinate conversion step.

[0015] Further, the legality verification of the schema of the node style configuration data and the parsing of the legal node style configuration data into an internal object model comprises: in the parsing process, identifying frequently accessed style attributes, pre-compiling the style attributes into an object format that can be quickly read and caching them to avoid repeated parsing of JSON configuration in the rendering process.

[0016] Further, the legality verification of the schema of the node style configuration data and the parsing of the legal node style configuration data into an internal object model comprises:

[0017] In the legality verification process, detect whether there is a missing mandatory field or a type mismatch error in the configuration data;

[0018] If an error is detected, output structured exception information containing error description information, and abort the parsing and subsequent rendering process for the current configuration.

[0019] Further, the sequentially layered rendering of the set of graphical elements to be rendered for the current node includes:

[0020] According to the index order of the predefined array of graphical elements in the internal object model, sequentially access each graphical element description object;

[0021] For the currently accessed graphical element, call the rule evaluation engine, input the business attribute data of the current node, execute the display rule associated with the graphical element, and obtain a Boolean type judgment result;

[0022] According to the judgment result, if true, add the current graphical element to the rendering queue of the current frame; if false, immediately skip the element and do not add it to the queue, and continue to traverse the next element;

[0023] After completing the traversal and filtering of all graphical elements of the current node, sequentially execute the actual Canvas drawing API call for each element in the rendering queue to draw it into the converted node local coordinate system.

[0024] Further, before sequentially layered rendering of the set of graphical elements to be rendered for the current node, the method further includes:

[0025] Based on the current Canvas visual area boundary, calculate and determine whether the node is located within the visual area;

[0026] If the node is completely outside the visual area, skip all layered rendering steps for the node to achieve rendering performance optimization.

[0027] Further, based on the current Canvas visual area boundary, calculating and determining whether the node is located within the visual area includes:

[0028] Grid division step: divide the entire canvas coordinate system into a static two-dimensional grid composed of uniform size grid cells;

[0029] Node registration step: traverse all nodes to be rendered, calculate the axial bounding box of each node, and according to the spatial position of the bounding box, determine one or more grid cells covered or intersected by the node, and register the node identifier to these corresponding grid cells;

[0030] The visual judgment step: according to the translation and zoom parameters of the current canvas, the bounding box of the visible area is calculated, and the grid cell set covered by the viewport bounding box is quickly determined; for a node to be rendered, only when the registered grid cell set of the node intersects with the grid cell set, the node is determined as a potential visible node.

[0031] Further, the method further comprises:

[0032] Monitoring the position or shape change event of the node on the canvas;

[0033] When a change in the node is detected, the node identifier is removed from its original registered grid cell, and the node registration step is re-executed based on its new bounding box;

[0034] In response to the zoom or translation of the canvas, the visual judgment step is re-executed.

[0035] In addition, the second aspect also proposes a self-defined graph node visualization system based on business attribute dynamic rendering, comprising:

[0036] The configuration parsing module is configured to receive node style configuration data in JSON format, verify the legality of the schema of the node style configuration data, and parse the legal node style configuration data into an internal object model; the internal object model includes graphic element definition, style attribute, display rule and position information;

[0037] The rule evaluation module is configured to obtain the business attribute data of the current node, dynamically evaluate the display condition of each graphic element according to the display rule in the internal object model, and generate a set of graphic elements to be rendered; wherein the display rule supports logical operation and comparison operation on node business attributes;

[0038] The hierarchical rendering module is configured to sequentially perform hierarchical rendering on the set of graphic elements to be rendered for the current node to realize node drawing; the hierarchical rendering at least includes rendering the basic shape and fixed style of the node on the basic layer, and then rendering the dynamic element layer that meets the display rule according to the order of the set of graphic elements.

[0039] In addition, the third aspect also provides an electronic device, which comprises one or more processors, a memory for storing one or more computer programs; the computer programs are configured to be executed by the one or more processors, and the programs include steps for executing the self-defined graph node visualization method based on business attribute dynamic rendering as described in the first aspect above.

[0040] From the above, the self-defined graph node visualization method based on business attribute dynamic rendering provided in the application can automatically and dynamically render the node with rich visual elements according to the business data according to the above implementation manner, only by setting the rules and styles through the configuration interface, without writing drawing codes, so that the expressiveness and development efficiency of the graph visualization are greatly improved. BRIEF DESCRIPTION OF DRAWINGS

[0041] In order to more clearly illustrate the technical solutions of the embodiments of the application, the following will briefly introduce the drawings needed to be used in the embodiments. It should be understood that the following drawings only show some of the embodiments of the application, and therefore should not be regarded as a limitation to the scope. For those skilled in the art, other related drawings can also be obtained without creative labor on the basis of these drawings.

[0042] Figure 1 is a flowchart of the steps of the self-defined graph node visualization method based on business attribute dynamic rendering disclosed in the embodiments of the application;

[0043] Figure 2 is a structural schematic diagram of the self-defined graph node visualization system based on business attribute dynamic rendering disclosed in the embodiments of the application. DETAILED DESCRIPTION

[0044] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the embodiments belong; the terms used in the specification of the application and the drawings are only for the purpose of describing specific embodiments and are not intended to limit the embodiments; the specification of the embodiments and the above drawing description of the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion. The specification of the embodiments and the above drawings of the terms "first", "second" and the like are used to distinguish different objects, not to describe a specific order.

[0045] The implementation details of the technical solutions of the embodiments will be described in detail as follows:

[0046] The application provides a self-defined graph node visualization method based on business attribute dynamic rendering, as shown in Figure 1 The method comprises the following steps:

[0047] In a first aspect, the application provides a self-defined graph node visualization method based on business attribute dynamic rendering, comprising:

[0048] In S101, the node style configuration data in JSON format is received, the schema of the node style configuration data is verified for legality, and the legal node style configuration data is parsed into an internal object model; the internal object model includes a graphical element definition, a style attribute, a display rule, and position information;

[0049] Specifically, in the present embodiment, for example, in a social network knowledge graph, it is necessary to intuitively distinguish between ordinary users and VIP users. A golden VIP badge and a text label need to be displayed on the node of a VIP user (userLevel >= 3). The system receives the above-mentioned JSON configuration. The parsing module first verifies the schema: checks whether the required base and customElements fields exist; confirms that the base.shape value is the predefined "circle"; checks whether each object in the customElements array contains the required fields of type, showIf, position, and the like. After verification, it is parsed into an internal object model, for example, a JavaScript object containing a baseShape object and an elementsList array is generated.

[0050] The configuration data (JSON) can be as follows:

[0051] {

[0052] "base": {

[0053] "shape": "circle",

[0054] "fill": "#FFFFFF",

[0055] "border": {"width": 2, "color": "#333333"},

[0056] "radius": 30

[0057] },

[0058] "customElements": [

[0059] {

[0060] "type": "image",

[0061] "src": "vip_badge.png",

[0062] "showIf": "userLevel >= 3",

[0063] "position": {"x": 10, "y": -18},

[0064] "size": {"width": 20, "height": 20}

[0065] },

[0066] {

[0067] "type": "text",

[0068] "content": "VIP",

[0069] "showIf": "userLevel >= 3",

[0070] "position": {"x": 10, "y": -18},

[0071] "style": {"color": "#FFD700", "fontSize": 12}

[0072] } ]

[0074] }

[0075] Among them, the visualization configuration tool is provided, through a graphical interface, adding, selecting, inputting and the like, the shape, size, color, border, font, font color, icon and the like of a node are completed, and the user can also customize additional element types and display rules and display styles of configuration elements through the interface, without writing code, the effect schema definition of the graph node can be realized, and the configuration data (JSON) file described above is generated. In the data drawing process, the display conditions of each graphical element are dynamically evaluated by analyzing the configuration properties of the node type, and the data effect is dynamically rendered, so that the graph development process without code is realized.

[0076] In S102, the business attribute data of the current node is obtained, and the display conditions of each graphical element are dynamically evaluated according to the display rules in the internal object model, so as to generate a set of graphical elements to be rendered; wherein the display rules support logical operation and comparison operation on the business attributes of the node.

[0077] Specifically, in the embodiment, it is assumed that the business attribute of the current node A to be rendered is {userLevel: 3, name: "Zhang San"}. The system traverses the elementsList array: for the VIP mark element, the display rule userLevel >= 3 is executed. The attribute of node A is substituted, 3 >= 3 is true, so the element is added to the set to be rendered. For the VIP text element, the rule is also true, and is also added to the set.

[0078] S103, sequentially and hierarchically rendering the set of to-be-rendered graphical elements of the current node to realize node drawing; the hierarchical rendering at least includes rendering a basic layer of a basic shape and a fixed style of the node first, and then rendering a dynamic element layer meeting a display rule according to an order of the set of graphical elements.

[0079] Specifically, in this embodiment, the system draws node A on the Canvas: according to the base configuration, a circle with a radius of 30 pixels, white filling, and a gray border is drawn at the center position of node A.

[0080] Based on this, in this embodiment, the core is to decouple the definition of node style from the code, and to realize dynamic rendering through parsable configuration data (JSON) and a rule engine. This embodiment shows how to realize conditional rendering based on business attributes (userLevel) through simple configuration, without modifying the program code to meet new display requirements, significantly improving flexibility and development efficiency. Hierarchical rendering ensures controllability of the drawing order and avoids the problem of occlusion between elements.

[0081] Further, before sequentially and hierarchically rendering the set of to-be-rendered graphical elements of the current node, the method further includes a coordinate conversion step: in the Canvas drawing environment, for the current to-be-rendered node, a coordinate transformation operation is performed to translate the origin of the global coordinate system of the drawing environment to the center point of the node, and a local coordinate system centered on the node is established.

[0082] The sequentially and hierarchically rendering the set of to-be-rendered graphical elements of the current node includes: sequentially rendering the set of to-be-rendered graphical elements in the local coordinate system; and after completing the rendering of all graphical elements of the current node, restoring the global coordinate system of the Canvas drawing environment to a state before the coordinate conversion step.

[0083] Specifically, in this embodiment, node A of a VIP user is taken as an example for continuous drawing. It is assumed that the center point coordinates of node A in the global coordinate system of the Canvas are (500, 300).

[0084] Before starting to draw node A, the save() method of the Canvas context is called to save the current global coordinate system state. The context.translate(500, 300) method is called. This operation translates the origin of the drawing environment from the top-left corner (0, 0) of the Canvas to the center (500, 300) of node A. After this, the coordinates of all drawing instructions are based on this new origin.

[0085] Render in local coordinate system: At this time, when drawing the node base circle, the center coordinates are (0, 0). When drawing the VIP mark, the position configuration {"x": 10, "y": -18} means that it is at the right of the node center by 10 pixels and 18 pixels above the node center, without the need for complex absolute coordinate calculation (such as 500 + 10, 300 - 18).

[0086] After completing all the drawing of node A, the restore() method is called to restore the origin of the coordinate system to the upper left corner of the canvas, ensuring that the coordinate calculation is correct when drawing the next node B.

[0087] Overall, through the establishment of the coordinate system, it is determined that when drawing a node, the origin of the drawing context environment coordinates will be translated to the center of the node (for example: the node coordinates are x = 500, y = 300, and through the translation method context.translate(500, 300) of the canvas drawing environment, the starting coordinate position of the drawing environment will be moved to the coordinate point (500, 300) of the canvas. The next time the drawing method is called, the starting point will be calculated based on the relative coordinates (0, 0)). In this way, when adding other custom graphical elements to the node, the drawing coordinates of the elements become very easy to determine. Only the radius and rotation angle of the node need to be used to calculate the coordinates of the elements to be drawn using relative coordinates or trigonometric functions. Users no longer need to perform complex position calculations based on the overall coordinates of the canvas.

[0088] In this embodiment, the coordinate conversion step introduced is the key to the flexible positioning of the method. It simplifies the complex global absolute coordinate calculation to a simple relative coordinate definition. Configuration personnel only need to be concerned about the position of the graphical element relative to the center of the node, greatly reducing the configuration complexity and improving the positioning accuracy and ease of use. The use of save() and restore() ensures the isolation of the drawing state and avoids interference between node drawings.

[0089] Further, the schema of the node style configuration data is verified for legality, and the legal node style configuration data is parsed into an internal object model, including: in the parsing process, the frequently accessed style attributes are identified, the style attributes are pre-compiled into an object format that can be quickly read and cached to avoid repeated parsing of JSON configuration during rendering.

[0090] Specifically, in the embodiment, when parsing the JSON configuration, the system identifies that the attributes of fill (fill color) under base, border.width (border width), and the like, and the position (position), style (style) of each element in customElements are high-frequency attributes that must be read when rendering each node. The parsing module does not go to the original JSON object to find values such as base.fill layer by layer every time the node is rendered. Instead, when parsing for the first time, the high-frequency access path parsing results are extracted and converted into a flattened internal style object that can be directly and quickly accessed. For example, a cache object is generated:

[0091] {

[0092] base_fill: "#FFFFFF",

[0093] base_border_width: 2,

[0094] element0_type: "image",

[0095] element0_position_x: 10,

[0096] element0_position_y: -18,

[0097] element1_type: "text",

[0098] / / ... Other high-frequency attributes

[0099] }

[0100] When the graph contains thousands of nodes, repeated JSON parsing and attribute lookup can significantly improve performance. The embodiment converts configuration data into a structure that is more easily and efficiently read by the rendering engine through pre-compilation and caching mechanisms, reducing runtime parsing overhead, especially in large-scale data visualization scenarios, effectively ensuring smooth rendering.

[0101] Further, the schema of the node style configuration data is verified for legality, and the legal node style configuration data is parsed into an internal object model, including:

[0102] During the legality verification process, it is detected whether the configuration data has missing required fields or field value type mismatch errors;

[0103] If an error is detected, structured exception information containing error description information is output, and the parsing and subsequent rendering process of the current configuration are aborted.

[0104] Specifically, this embodiment assumes that the user accidentally writes the base field as basic or sets the value of border.width as a string "2" instead of a number 2 in the submitted configuration. The validation and exception handling process of this embodiment is as follows:

[0105] The validation logic of the parsing module will detect that the base field is missing (the required field check fails). Instead of continuing parsing or adopting default values, the module will immediately construct a structured error message, for example: { errorCode: "MISSING_REQUIRED_FIELD", fieldName: "base", message: "The configuration must contain the 'base' field"}. Then, the parsing process is aborted, and this error message is thrown or logged. The front-end interface can catch this exception and clearly prompt the user: "Configuration error: missing required 'base' field definition".

[0106] Based on this, through the pre-posed, strict schema validation and explicit exception handling mechanism, errors can be discovered in time during the configuration phase, avoiding invalid or incorrect configurations from being applied to the rendering link, leading to unpredictable display results or program crashes. Structured error information provides great convenience for quickly locating and fixing configuration problems.

[0107] Further, the sequentially layered rendering of the current node to the set of graphical elements to be rendered includes: sequentially accessing each graphical element description object according to the index order of the pre-defined graphical element array in the internal object model; for the currently accessed graphical element, calling the rule evaluation engine, taking the business attribute data of the current node as input, executing the display rule associated with the graphical element, and obtaining a Boolean type judgment result; according to the judgment result, if true, the current graphical element is added to the rendering queue of the current frame; if false, the element is immediately skipped and not added to the queue, and the next element is continued to be traversed; after completing the traversal and screening of all graphical elements of the current node, each element in the rendering queue is sequentially executed Actual Canvas drawing API call to draw it into the converted node local coordinate system.

[0108] Specifically, this embodiment, the customElements array of node A contains two elements: index 0 (VIP index) and index 1 (VIP text). The detailed process of layered rendering is as follows:

[0109] 1. Traverse and filter: Visit the element at index 0 (the icon). Execute its rule userLevel >= 3, which is true, and add it to the rendering queue. Visit the element at index 1 (the text). Execute the same rule, which is also true, and add it to the queue.

[0110] 2. Drawing execution: The rendering queue is [element 0, element 1]. The system first calls the drawImage method to draw element 0 (the icon) in the local coordinate system of the node. Then, it calls the fillText method to draw element 1 (the text).

[0111] Based on this, the specific execution logic of dynamic layer rendering is clear. The order of traversal and rendering is strictly according to the configuration array, ensuring that the Z-order (Z-order) of elements meets the design expectations. First, complete the rule judgment of all elements to generate a certain rendering queue, and then perform the drawing API call. This "filter first, draw later" mode avoids frequent rule judgment during drawing, which is beneficial for code organization and potential performance optimization (such as batch drawing operations). The rendering content of each frame is determined before drawing, making the rendering process more controllable and predictable.

[0112] Further, before sequentially rendering the set of graphical elements to be rendered for the current node, the method further comprises:

[0113] Based on the boundary of the current Canvas's visible area, calculate and judge whether the node is located within the visible area;

[0114] If the node is completely outside the visible area, skip all the hierarchical rendering steps of the node to achieve rendering performance optimization.

[0115] Specifically, in this embodiment, it is assumed that there are 10,000 nodes on the canvas, but the current user's screen (viewport) can only display about 100 nodes at the same time.

[0116] The system calculates the current viewport's rectangular area in the canvas global coordinate system according to the scroll and zoom parameters of the canvas (for example: {x: 0, y: 100, width: 1920, height: 1080}). For each node, the bounding box of the node is calculated. For example, the bounding box of node A may be a square with a side length of 60 pixels centered at the center (500, 300) (because the radius is 30). The intersection of the node's bounding box and the viewport rectangle is determined using geometric operations. The bounding box of node A intersects with the above-mentioned viewport, so it needs to be rendered. For another node Z with a center coordinate at (-100, -100), its bounding box is completely outside the viewport, so the system directly skips all operations such as regular evaluation, coordinate conversion, and hierarchical rendering of the node.

[0117] Based on this, through view frustum culling, the entire computational overhead of invisible nodes is avoided. This can greatly reduce the burden on the CPU (regular evaluation) and GPU (drawing instructions), ensuring that user interactions such as panning and zooming remain smooth even with massive data, which is an indispensable part of high-performance visualization.

[0118] Further, based on the current canvas visible area boundary, it is calculated and determined whether the node is located in the visible area, including:

[0119] Grid division step: divide the entire canvas coordinate system into a static two-dimensional grid composed of uniform size grid cells;

[0120] Node registration step: traverse all nodes to be rendered, calculate the axial bounding box of each node, and determine one or more grid cells covered or intersected by the node according to the spatial position of the bounding box, and register the node identifier in these corresponding grid cells;

[0121] Visible judgment step: according to the current canvas panning and zooming parameters, the bounding box of the visible area is calculated, and the grid cell set covered by the viewport bounding box is quickly determined; for a node to be rendered, only when the grid cell set registered by the node intersects with the grid cell set, the node is determined as a potential visible node.

[0122] Specifically, in this embodiment, for example, on a large screen in a smart city power grid monitoring center, it is necessary to display the city's power grid topology map in real time, which contains hundreds of thousands of nodes (such as substations, distribution boxes, and user electricity meters). Users need to be able to seamlessly pan and zoom to quickly locate the fault area. Any lag is unacceptable.

[0123] First, the first step, through the initialization of the grid system and data structure design. Assume the virtual canvas size is 200000px * 200000px to accommodate all nodes. Among them, the grid is too small, a node may span multiple grids, registration and query overhead is large; grid is too large, too many nodes in each grid, the query accuracy decreases. After testing, the unit size (Cell Size) is 250px * 250px. This is an empirical value, usually 2-5 times the average node size. The number of grid columns cols = Math.ceil(200000 / 250) = 800, the number of rows rows = 800. The entire canvas is divided into an 800 * 800 static grid.

[0124] The system maintains a two-dimensional array in memory as a spatial index table.

[0125] / / Initialize an 800x800 grid, each cell is a Set, used to store node IDs

[0126] const spatialGrid = Array.from({ length: 800}, () =>

[0127] Array.from({ length: 800}, () => new Set()));

[0128] Among them, the Set data structure automatically ensures the uniqueness of the node ID, avoiding the same node being added repeatedly due to covering multiple grids. The time complexity of its add, delete, has operation is approximately O(1).

[0129] Second, the second step, the detailed process and mathematical calculation of node registration. Including:

[0130] (1) Calculate the axis-aligned bounding box (AABB) of the node: for each node, assume its center is (x, y), and its radius is r (circular node) or width / height is w, h (rectangular node). The top-left corner coordinates of its AABB are (x - r, y - r) or (x- w / 2, y - h / 2), and the bottom-right corner coordinates are (x + r, y + r) or (x + w / 2, y + h / 2).

[0131] Example: Node A (substation), center coordinates (12560, 78900), radius 40px. Then its AABB is:

[0132] minX = 12560 - 40 = 12520

[0133] maxX = 12560 + 40 = 12600

[0134] minY = 78900 - 40 = 78860

[0135] maxY = 78900 + 40 = 78940.

[0136] (2) Map the AABB to grid coordinates: Calculate the grid column range [minCol, maxCol] and row range [minRow, maxRow] that the AABB covers.

[0137] Formula: gridCoord = Math.floor(worldCoord / cellSize)

[0138] Example (Node A):

[0139] minCol = Math.floor(12520 / 250) = Math.floor(50.08) = 50

[0140] maxCol = Math.floor(12600 / 250) = Math.floor(50.4) = 50

[0141] minRow = Math.floor(78860 / 250) = Math.floor(315.44) = 315

[0142] maxRow = Math.floor(78940 / 250) = Math.floor(315.76) = 315.

[0143] If a large node B (representing an area) is 400px wide and 300px high, with its center at (1000, 1000). Its AABB covers the grid range [3,5] columns and [3,4] rows, i.e. it needs to register to (3,3), (4,3), (5,3), (3,4), (4,4), (5,4) these 6 grid units.

[0144] (3) Perform registration:

[0145] Iterate through all the calculated grid coordinates (col, row) and add the unique identifier of node A nodeId_A to the Set spatialGrid[col][row].

[0146] Third step, efficient query algorithm for visual judgment.

[0147] (1) Calculate the grid range covered by the viewport: the current viewport is defined by the top-left corner (viewX, viewY) and the width viewWidth, height viewHeight.

[0148] The user is viewing a part of the canvas, the viewport is viewX=12000, viewY=78000, viewWidth=1920, viewHeight=1080.

[0149] Calculate the grid range covered by the AABB of the viewport:

[0150] startCol = Math.floor(12000 / 250) = 48

[0151] endCol = Math.floor((12000 + 1920) / 250) = Math.floor(13920 / 250) =55

[0152] startRow = Math.floor(78000 / 250) = 312

[0153] endRow = Math.floor((78000 + 1080) / 250) = Math.floor(79080 / 250) =316.

[0154] (2) Collect the set of potentially visible node IDs: create a total visibleNodeSet = new Set(). Traverse all grid cells from grid column 48 to 55, and row 312 to 316. For each grid cell (col, row), add all node IDs in the Set spatialGrid[col][row] to visibleNodeSet.

[0155] (3) Precise collision detection: The visibleNodeSet obtained from the grid query is "potentially visible" nodes, because a node is registered in the grid covered by the viewport, but its AABB may not intersect with the viewport boundary (for example, the node is in the corner of the grid, but the viewport does not cover that corner). Preferably, for each node in the visibleNodeSet, a precise AABB and viewport rectangle intersection judgment can be performed. But the number of this step has been reduced from hundreds of thousands to thousands, and the overhead is very small. In practical applications, sometimes this step is omitted because when the grid is dense enough, the "potentially visible" set is already very close to the "really visible" set.

[0156] Further, the method further comprises:

[0157] monitoring position or shape change events of the nodes on the canvas;

[0158] when a change in the node is detected, removing the node identifier from the grid cell it was previously registered in, and re-executing the node registration step based on its new bounding box;

[0159] in response to the canvas being zoomed or panned, re-executing the visibility judgment step.

[0160] Specifically, in this embodiment, the system monitors the positionChanged event of the node. When node A moves from the old position P_old to the new position P_new, the system calculates the grid cell list it was previously registered in according to P_old (such as [(50, 315)]), and then removes its node ID from the Set of these cells. According to P_new, a new grid cell list is calculated, and the node ID is re-registered. This operation should be atomic, or ensure that no modification occurs during rendering queries to avoid dirty reads.

[0161] When the user pans or zooms the canvas, the (viewX, viewY, viewWidth, viewHeight) of the viewport changes. The system only needs to recalculate the grid range covered by the viewport and collect a new visibleNodeSet. The grid index structure spatialGrid itself does not need to be changed at all, so the response speed is extremely fast.

[0162] In addition, the second aspect also proposes a custom graph node visualization system based on dynamic rendering of business attributes, as shown in Figure 2 The system comprises:

[0163] The configuration analysis module 301 is configured to receive node style configuration data in JSON format, perform legality verification on a schema of the node style configuration data, and parse the legal node style configuration data into an internal object model; the internal object model includes a graphical element definition, a style attribute, a display rule, and position information.

[0164] The rule evaluation module 302 is configured to obtain service attribute data of a current node, dynamically evaluate a display condition of each graphical element according to a display rule in the internal object model, and generate a set of graphical elements to be rendered; the display rule supports logical operation and comparison operation on node service attributes.

[0165] The hierarchical rendering module 303 is configured to sequentially perform hierarchical rendering on the current node for the set of graphical elements to be rendered, to realize node drawing; the hierarchical rendering at least includes rendering a basic layer of a basic shape and a fixed style of the node first, and then rendering a dynamic element layer that meets the display rule according to an order of the set of graphical elements.

[0166] The above merely describes the embodiments of the present application and is not used to limit the protection scope of the present application. For those skilled in the art, the present application can have various modifications and changes. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A method for custom graph node visualization based on dynamic rendering of business attributes, characterized in that, The method comprises the following steps: receiving node style configuration data in JSON format, verifying the legality of the schema of the node style configuration data, and parsing the legal node style configuration data into an internal object model; the internal object model includes graphical element definitions, style attributes, display rules, and position information; obtaining the business attribute data of the current node, dynamically evaluating the display conditions of each graphical element according to the display rules in the internal object model, and generating a set of graphical elements to be rendered; the display rules support logical operations and comparison operations on node business attributes; sequentially rendering the set of graphical elements to be rendered in layers for the current node to realize node drawing; the layered rendering at least includes rendering a basic layer of the basic shape and fixed style of the node, and then rendering a dynamic element layer that meets the display rules according to the order of the set of graphical elements.

2. The method of claim 1, wherein, Before sequentially rendering the set of graphical elements to be rendered in layers for the current node, the method further comprises a coordinate conversion step: in the Canvas drawing environment, for the current node to be rendered, performing a coordinate transformation operation to translate the origin of the global coordinate system of the drawing environment to the center point of the node, and establishing a local coordinate system centered on the node; the sequentially rendering the set of graphical elements to be rendered in layers for the current node comprises: sequentially rendering the set of graphical elements to be rendered in the local coordinate system; and after completing the rendering of all graphical elements of the current node, restoring the global coordinate system of the Canvas drawing environment to the state before the coordinate conversion step. 3.The method of claim 2, wherein, The legality verification of the schema of the node style configuration data and the parsing of the legal node style configuration data into an internal object model comprises: in the parsing process, identifying frequently accessed style attributes, pre-compiling the style attributes into an object format that can be quickly read and caching them to avoid repeated parsing of JSON configuration during the rendering process.

4. The method of claim 3, wherein, The legality verification of the schema of the node style configuration data and the parsing of the legal node style configuration data into an internal object model comprises: During the legality verification process, detect whether the configuration data has errors such as missing required fields or mismatched field value types; If an error is detected, output structured exception information containing error description information, and abort the parsing and subsequent rendering process of the current configuration.

5. The method of claim 2, wherein, The sequentially rendering the set of graphical elements to be rendered in layers for the current node comprises: access each graphical element description object in the order of the index of the graphical element array predefined in the internal object model; for the currently accessed graphical element, call the rule evaluation engine, input the business attribute data of the current node, execute the display rules associated with the graphical element, and obtain a Boolean type judgment result; according to the judgment result, if true, add the current graphical element to the rendering queue of the current frame; if false, skip the element and continue to the next element. After the traversal and screening of all graphical elements of the current node are completed, actual Canvas drawing API calls are sequentially performed on each element in the rendering queue to draw it into the converted node local coordinate system.

6. The method of claim 1, wherein, Before sequentially layering rendering the set of graphical elements to be rendered for the current node, the method further comprises: Based on the current Canvas visual area boundary, calculate and determine whether the node is located within the visual area; If the node is completely outside the visual area, skip all layering rendering steps of the node to achieve rendering performance optimization.

7. The method of claim 6, wherein, Based on the current Canvas visual area boundary, calculate and determine whether the node is located within the visual area, comprising: Grid division step: divide the entire canvas coordinate system into a static two-dimensional grid composed of uniform size grid cells; Node registration step: traverse all nodes to be rendered, calculate the axial bounding box of each node, and determine one or more grid cells covered or intersected by the node according to the spatial position of the bounding box, and register the node identifier in the corresponding grid cells; Visual judgment step: according to the translation and scaling parameters of the current canvas, calculate the bounding box of the visual area, and quickly determine the grid cell set covered by the viewport bounding box; for a node to be rendered, only when the grid cell set registered by the node intersects with the grid cell set, the node is determined as a potentially visible node. 8.The method of claim 7, wherein, The method further comprises: Monitor the position or shape change event of the node on the canvas; When a change in the node is detected, remove the node identifier from its original registered grid cell, and re-execute the node registration step based on its new bounding box; In response to the scaling or translation of the canvas, re-execute the visual judgment step. 9.A system for custom graph node visualization based on dynamic rendering of business attributes, the system comprising: Comprise: A configuration parsing module configured to receive node style configuration data in JSON format, verify the legality of the schema of the node style configuration data, and parse the legal node style configuration data into an internal object model; the internal object model includes graphical element definition, style attribute, display rule and position information; A rule evaluation module configured to obtain business attribute data of the current node, dynamically evaluate the display conditions of each graphical element according to the display rule in the internal object model, and generate a set of graphical elements to be rendered; wherein the display rule supports logical and comparison operations on node business attributes; A layering rendering module configured to sequentially layer render the set of graphical elements to be rendered for the current node to realize node drawing; the layering rendering at least includes rendering the basic shape and fixed style of the node on the basic layer, and then rendering the dynamic element layer that meets the display rule according to the order of the graphical element set. 10.An electronic device comprising: One or more processors, memory, the memory is used to store one or more computer programs; characterized in that, the computer program is configured to be executed by the one or more processors, the program includes a method for executing the business attribute based dynamic rendering of the self-defined graph node visualization method according to any one of claims 1-8.

Images