Custom atlas node visualization method based on service attribute dynamic rendering

Abstract

The invention provides a self-defined graph node visualization method based on dynamic rendering of service attributes, which comprises the following steps of: receiving and verifying node style configuration in a JSON format, and analyzing the node style configuration into an internal model containing graph definition, style, rule and position; dynamically evaluating whether graphic elements are displayed or not according to rules in combination with node service data, and generating a to-be-rendered set; and finally, performing layered rendering: firstly drawing a basic shape and a style, and then rendering dynamic elements meeting conditions according to a sequence to finish node drawing. According to the method, a user only needs to set rules and styles through a configuration interface, drawing codes do not need to be written, the system can automatically and dynamically render nodes with rich visual elements according to the service data, and the expressive force and development efficiency of graph visualization are greatly improved.

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] Currently, 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: 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 status at a specific position (such as the upper right corner) of the node.

[0004] 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.

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

[0006] 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 approach, to reduce the development threshold and improve development efficiency and visualization performance. SUMMARY

[0007] The purpose of the present application is 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.

[0008] In a first aspect, the application provides a self-defined graph node visualization method based on dynamic rendering of business attributes, comprising: 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; 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; sequentially layer rendering the set of graphic elements to be rendered for the current node to realize node drawing; the layer 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.

[0009] Further, before sequentially layer 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, perform coordinate transformation operation to translate the origin of the global coordinate system of the drawing environment to the center point of the node, and establish a local coordinate system with the node as the center; The sequentially layer rendering 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.

[0010] 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, identify the frequently accessed style attributes, precompile the style attributes into an object format that can be quickly read and cache to avoid repeated parsing of JSON configuration in the rendering process.

[0011] 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 legality verification process, detect whether the configuration data has the error of missing mandatory field or field value type mismatch; 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.

[0012] Further, the rendering the set of graphic elements to be rendered for the current node in sequence includes: accessing each graphic element description object in sequence according to the index order of the array of graphic elements predefined in the internal object model; for the currently accessed graphic element, invoking the rule evaluation engine, taking the business attribute data of the current node as input, executing the display rule associated with the graphic element, and obtaining a Boolean type judgment result; according to the judgment result, if true, adding the current graphic element to the queue of elements to be rendered in the current frame; if false, immediately skipping the element and not adding it to the queue, and continuing to traverse the next element; after completing the traversal and screening of all graphic elements of the current node, sequentially executing the actual Canvas drawing API call for each element in the queue of elements to be rendered to draw it into the converted node local coordinate system.

[0013] Further, before rendering the set of graphic elements to be rendered for the current node in sequence, the method further includes: based on the boundary of the visible area of the current Canvas, calculating and judging whether the node is located within the visible area; if the node is completely outside the visible area, skipping all the hierarchical rendering steps of the node to achieve rendering performance optimization.

[0014] Further, based on the boundary of the visible area of the current Canvas, calculating and judging whether the node is located within the visible area includes: grid division step: dividing the entire Canvas coordinate system into a static two-dimensional grid composed of uniform size grid cells; node registration step: traversing all nodes to be rendered, calculating the axial bounding box of each node, and determining one or more grid cells covered or intersected by the node according to the spatial position of the bounding box, and registering the node identifier in the corresponding grid cells; visible judgment step: according to the translation and scaling parameters of the current Canvas, calculating the bounding box of the visible area, and quickly determining the set of grid cells covered by the viewport bounding box; for a node to be rendered, only when the set of grid cells registered by the node intersects with the set of grid cells, the node is determined to be a potentially visible node.

[0015] Further, the method further includes: monitoring the position or shape change event of the node on the Canvas; when a change in a node is detected, removing the node identifier from its originally registered grid cell and re-executing the node registration step based on its new bounding box; re-executing the visibility determination step in response to the canvas being zoomed or panned.

[0016] In addition, the second aspect also provides a self-defined graph node visualization system based on dynamic rendering of business attributes, comprising: A configuration parsing module is configured to receive node style configuration data in JSON format, perform legality verification on 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 comprises graphic element definitions, style attributes, display rules, and position information; A rule evaluation module is configured to obtain business attribute data of a current node, dynamically evaluate the display conditions of each graphic element according to the display rules in the internal object model, and generate a set of graphic elements to be rendered; wherein the display rules support logical operations and comparison operations on node business attributes; A 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 comprises rendering a basic shape and a fixed style of a basic layer of a node, and then rendering a dynamic element layer that meets the display rules according to the order of the set of graphic elements.

[0017] In addition, the third aspect also provides an electronic device, comprising 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 comprise steps for executing the self-defined graph node visualization method based on dynamic rendering of business attributes as described in the first aspect.

[0018] As can be seen from the above, the self-defined graph node visualization method based on dynamic rendering of business attributes provided by the present application can automatically and dynamically render nodes with rich visual elements according to business data without the need for users to write drawing codes by only setting rules and styles through a configuration interface, thereby greatly improving the expressiveness and development efficiency of graph visualization. BRIEF DESCRIPTION OF DRAWINGS

[0019] In order to more clearly illustrate the technical solutions of the embodiments of the present 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 embodiments of the present application, and therefore should not be considered as limiting the scope. For those skilled in the art, other related drawings can also be obtained without creative labor on the basis of these drawings.

[0020] Figure 1 is a flowchart of steps of a self-defined graph node visualization method based on dynamic rendering of business attributes disclosed by embodiments of the present application; Figure 2 is a structural diagram of a self-defined graph node visualization system based on dynamic rendering of business attributes disclosed by embodiments of the present application. DETAILED DESCRIPTION

[0021] 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 embodiments of the present application belong; the terminology used in the description of the present application herein is for the purpose of describing particular embodiments only and is not intended to be limiting of embodiments of the present application; the description of embodiments of the present application and the above-mentioned drawing description are intended to cover not only the including but also the excluding. The terms "first", "second", and the like in the description of embodiments of the present application and the above-mentioned drawing description are used to distinguish different objects, not to describe a particular order.

[0022] The implementation details of the technical solutions of the present application are described in detail as follows: The present application provides a self-defined graph node visualization method based on dynamic rendering of business attributes, as shown in Figure 1 The method comprises the following steps: In the first aspect, the present application provides a self-defined graph node visualization method based on dynamic rendering of business attributes, comprising: S101, 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; Specifically, in a social network knowledge graph, for example, 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 such as type, showIf, and position. After the verification is passed, it is parsed into an internal object model, for example, a JavaScript object containing a baseShape object and an elementsList array is generated.

[0023] Among them, the configuration data (JSON) can be: { "base": { "shape": "circle", "fill": "#FFFFFF", "border": {"width": 2, "color": "#333333"}, "radius": 30 }, "customElements": [ { "type": "image", "src": "vip_badge.png", "showIf": "userLevel >= 3", "position": {"x": 10, "y": -18}, "size": {"width": 20, "height": 20} }, { "type": "text", "content": "VIP", "showIf": "userLevel >= 3", "position": {"x": 10, "y": -18}, "style": {"color": "#FFD700", "fontSize": 12} } ] }

[0024] Among them, the visualization configuration tool is provided, through the graphical interface, adding, selecting, inputting and other operations, completing node shape, size, color, border, font, font color, icon, etc. Also, through the interface, the user can customize additional element types and the display rules and display styles of the configuration elements. Without writing code, the effect schema definition of the graph node can be realized, and the above configuration data (JSON) file can be generated. In the data drawing process, the configuration properties of the node type are parsed, and the data effect is dynamically rendered to realize the code-free graph development process.

[0025] S102, obtain the service 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 service attributes; Specifically, in this embodiment, it is assumed that the service attribute of the current node A to be rendered is {userLevel: 3, name: "Zhang San"}. The system traverses the elementsList array: for the VIP icon element, the display rule userLevel >= 3 is executed. Substituting the attribute of node A, 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 it is also added to the set.

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

[0027] 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 gray border is drawn at the center position of node A.

[0028] 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 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. Layer rendering ensures the controllability of the drawing order and avoids the problem of element occlusion.

[0029] Further, before sequentially layer rendering the set of graphic elements to be rendered for the current node, the method further includes a coordinate conversion step: in the Canvas drawing environment, for the current node to be rendered, 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; The sequentially layer rendering the set of graphic elements to be rendered for the current node includes: 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.

[0030] Specifically, in this embodiment, we continue to take drawing VIP user node A as an example. Assume that the center point coordinates of node A in the global coordinate system of the canvas are (500, 300).

[0031] Before starting to draw node A, call the `save()` method of the Canvas context to save the current global coordinate system state. Then call the `context.translate(500, 300)` method. This operation translates the origin of the drawing environment from the top-left corner of the canvas (0,0) to the center of node A (500,300). Thereafter, all drawing commands will be based on this new origin.

[0032] Rendering in local coordinates: When drawing the basic circle of a node, the center coordinates are (0,0). When drawing the VIP label, the position configuration {"x": 10, "y": -18} means that it is 10 pixels to the right and 18 pixels above the center of the node, without the need for complex absolute coordinate calculations (such as 500 + 10, 300 - 18).

[0033] After all the drawing of node A is completed, the restore() method is called to restore the origin of the coordinate system to the top left corner of the canvas, ensuring that the coordinates are calculated correctly when drawing the next node B.

[0034] In general, by establishing a coordinate system, when drawing nodes, the origin of the drawing context is translated to the center of the node using the `translate` method (e.g., if the node coordinates are x=500, y=300, the canvas drawing environment's translation method `context.translate(500, 300)` will move the starting coordinate position of the drawing environment to the canvas's coordinate point (500, 300). The next time the drawing method is called, the starting point will be calculated from the relative coordinates (0, 0). This makes it very easy to determine the drawing coordinates of other custom graphic elements when adding them to the node. The element's drawing coordinates can be calculated using relative coordinates or trigonometric functions based on the node's radius and rotation angle, eliminating the need for complex position calculations based on the overall canvas coordinates.

[0035] In this embodiment, the introduced coordinate transformation step is key to the flexible positioning achieved by this method. It simplifies the complex calculation of global absolute coordinates into a simple definition of relative coordinates. Configuration personnel only need to concern themselves with the position of the graphic element relative to the node center, greatly reducing configuration complexity and improving positioning accuracy and ease of use. The use of `save()` and `restore()` ensures the isolation of drawing states, preventing mutual interference between the drawing of nodes.

[0036] Furthermore, the step of validating the schema of the node style configuration data and parsing the valid node style configuration data into an internal object model includes: identifying frequently accessed style attributes during the parsing process, precompiling the style attributes into a fast-readable object format and caching them to avoid repeatedly parsing JSON configuration during the rendering process.

[0037] Specifically, in this embodiment, when parsing the JSON configuration, the system identifies frequently accessed properties such as `fill` (fill color) and `border.width` under `base`, and `position` and `style` of each element in `customElements`, as essential properties that must be read when rendering each node. The parsing module does not search for values ​​like `base.fill` layer by layer in the original JSON object every time a node is rendered. Instead, during the initial parsing, it extracts the parsing results of these frequently accessed paths and converts them into a flattened, directly accessible internal style object. For example, a cached object is generated: { base_fill: "#FFFFFF", base_border_width: 2, element0_type: "image", element0_position_x: 10, element0_position_y: -18, element1_type: "text", / / ... Other high-frequency attributes }

[0038] When the graph contains tens of thousands of nodes, avoiding repetitive JSON parsing and attribute lookups can significantly improve performance. This embodiment uses pre-compilation and caching mechanisms to transform configuration data into a structure that is easier for the rendering engine to read efficiently, reducing runtime parsing overhead. This effectively ensures smooth rendering, especially in large-scale data visualization scenarios.

[0039] Furthermore, the step of validating the schema of the node style configuration data and parsing the valid node style configuration data into an internal object model includes: During the validity verification process, the system checks for errors such as missing required fields or mismatched field value types in the configuration data. If an error is detected, a structured exception message containing an error description is output, and the parsing of the current configuration and subsequent rendering processes are aborted.

[0040] Specifically, in this embodiment, it is assumed that the user accidentally wrote "basic" instead of "base" in the configuration submitted, or set the value of "border.width" to the string "2" instead of the number 2. The verification and exception handling process in this embodiment is as follows: The parsing module's validation logic detects a missing `base` field (required field check failed). The module will not continue parsing or use a default value; instead, it will immediately construct a structured error message, such as: `{ errorCode: "MISSING_REQUIRED_FIELD", fieldName: "base", message: "The configuration must include the 'base' field"}`. The parsing process is then aborted, and this error message is either thrown or logged. The front-end interface can capture this exception and clearly indicate to the user: "Configuration error: Required 'base' field definition is missing."

[0041] Therefore, through proactive and rigorous schema verification and explicit exception handling mechanisms, errors can be detected in a timely manner during the configuration phase, preventing invalid or incorrect configurations from being applied to the rendering process, which could lead to unpredictable display results or program crashes. Structured error messages greatly facilitate the rapid location and repair of configuration problems.

[0042] Furthermore, the step of sequentially rendering the set of graphic elements to be rendered for the current node includes: accessing each graphic element description object sequentially according to the index order of the predefined graphic element array in the internal object model; for the currently accessed graphic element, calling the rule evaluation engine, taking the business attribute data of the current node as input, executing the display rule associated with the graphic element, and obtaining a boolean judgment result; according to the judgment result, if it is true, adding the current graphic element to the rendering queue of this frame; if it is false, immediately skipping the element, not adding it to the queue, and continuing to traverse the next element; after completing the traversal and filtering of all graphic elements of the current node, sequentially executing the actual Canvas drawing API call for each element in the rendering queue, and drawing it onto the transformed node local coordinate system.

[0043] Specifically, in this embodiment, node A's `customElements` array contains two elements: index 0 (VIP badge) and index 1 (VIP text). Detailed process of layered rendering: 1. Traversal and Filtering: Access the element at index 0 (subscript). Execute the rule userLevel >= 3; if the result is true, add it to the rendering queue. Access the element at index 1 (text). Execute the same rule; if the result is also true, add it to the queue.

[0044] 2. Rendering Execution: The queue to be rendered is [element 0, element 1]. In the node's local coordinate system, the system first calls the `drawImage` method to draw element 0 (the index) in the queue. Then, it calls the `fillText` method to draw element 1 (the text) in the queue.

[0045] Based on this, the specific execution logic of dynamic layer rendering was clarified. Specifically, traversal and rendering are performed strictly according to the order of the configuration array, ensuring that the Z-order of elements conforms to the design expectations. Rule judgments for all elements are completed first, generating a defined queue to be rendered, and then the drawing API calls are made centrally. This "filter first, draw later" model avoids frequent rule judgments during the drawing process, which is beneficial for code organization and potential performance optimizations (such as batch drawing operations). The rendering content of each frame is determined before drawing, making the rendering process more controllable and predictable.

[0046] Furthermore, before sequentially rendering the set of graphical elements to be rendered on the current node, the method further includes: Based on the current visible area boundary of the Canvas, calculate and determine whether the node is located within the visible area; If a node is completely outside the visible area, all layered rendering steps for that node are skipped to optimize rendering performance.

[0047] 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 of them at the same time.

[0048] The system calculates the rectangular region of the current viewport in the canvas's global coordinate system based on the canvas's scrolling and scaling parameters (e.g., {x: 0, y: 100, width: 1920, height: 1080}). For each node, its bounding box is calculated. For example, the bounding box of node A might be a square centered at (500, 300) with a side length of 60 pixels (due to a radius of 30). Geometric operations are used to determine if the node's bounding box intersects with the viewport rectangle. Node A's bounding box intersects with the viewport rectangle, therefore it needs to be rendered. For another node Z with its center coordinates at (-100, -100), its bounding box is completely outside the viewport, so the system skips all operations such as rule evaluation, coordinate transformation, and layered rendering for that node.

[0049] Based on this, view frustum culling avoids all computational overhead for invisible nodes. This significantly reduces the burden on the CPU (rule evaluation) and GPU (drawing instructions), ensuring smooth user interactions (such as panning and zooming) even with massive amounts of data. This is an indispensable part of achieving high-performance visualization.

[0050] Furthermore, based on the current visible area boundary of the Canvas, calculate and determine whether a node is located within the visible area, including: Mesh generation steps: Divide the entire canvas coordinate system into a static two-dimensional mesh composed of uniformly sized grid cells; Node registration steps: Traverse all nodes to be rendered, calculate the axial bounding box of each node, and determine one or more mesh cells that the node covers or intersects based on the spatial position of the bounding box, and register the node identifier to these corresponding mesh cells; Visibility determination steps: Calculate the bounding box of the visible area based on the translation and scaling parameters of the current canvas, and quickly determine the set of mesh cells covered by the viewport bounding box; for a node to be rendered, the node is determined to be a potential visible node only if its registered set of mesh cells intersects with the set of mesh cells.

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

[0052] First, the initialization and data structure design of the grid system are performed. Assume the virtual canvas size is 200,000px * 200,000px to accommodate all nodes. If the grid is too small, a node may span too many grids, resulting in high registration and query overhead; if the grid is too large, there will be too many nodes within each grid, reducing query accuracy. After testing, a cell size of 250px * 250px was chosen. This is an empirical value, typically 2-5 times the average node size. The number of grid columns (cols) = Math.ceil(200,000 / 250) = 800, and the number of rows (rows) = 800. The entire canvas is divided into an 800 * 800 static grid.

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

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

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

[0056] Array.from({ length: 800}, () => new Set())); The Set data structure automatically guarantees the uniqueness of node IDs, preventing the same node from being added repeatedly because it covers multiple grids. Its add, delete, and has operations have a time complexity of approximately O(1).

[0057] Secondly, the second step involves the detailed process and mathematical calculations of node registration. This includes: (1) Calculate the axial bounding box (AABB) of the node: For each node, assume its center is (x, y) and its radius is r (circular node) or its width / height is w, h (rectangular node). The coordinates of its upper left corner of the AABB are (x - r, y - r) or (x - w / 2, y - h / 2), and the coordinates of its lower right corner are (x + r, y + r) or (x + w / 2, y + h / 2).

[0058] Example: Node A (substation), center coordinates (12560, 78900), radius 40px. Its AABB is: minX = 12560 - 40 = 12520 maxX = 12560 + 40 = 12600 minY = 78900 - 40 = 78860 maxY = 78900 + 40 = 78940.

[0059] (2) Map AABB to grid coordinates: Calculate the grid column range [minCol, maxCol] and row range [minRow, maxRow] covered by AABB.

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

[0061] Example (Node A): minCol = Math.floor(12520 / 250) = Math.floor(50.08) = 50 maxCol = Math.floor(12600 / 250) = Math.floor(50.4) = 50 minRow = Math.floor(78860 / 250) = Math.floor(315.44) = 315 maxRow = Math.floor(78940 / 250) = Math.floor(315.76) = 315.

[0062] If a large node B (representing a region) is 400px wide and 300px high, centered at (1000, 1000), its AABB-covered grid range may be [3,5] columns and [3,4] rows, meaning it needs to be registered in the following 6 grid cells: (3,3), (4,3), (5,3), (3,4), (4,4), (5,4).

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

[0064] The third step is an efficient query algorithm based on visual judgment.

[0065] (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 and height viewHeight.

[0066] The user is viewing a portion of the canvas, with viewports viewX=12000, viewY=78000, viewWidth=1920, and viewHeight=1080.

[0067] Calculate the grid extent covered by the AABB of the viewport: startCol = Math.floor(12000 / 250) = 48 endCol = Math.floor((12000 + 1920) / 250) = Math.floor(13920 / 250) =55 startRow = Math.floor(78000 / 250) = 312 endRow = Math.floor((78000 + 1080) / 250) = Math.floor(79080 / 250) =316.

[0068] (2) Collect the set of potential visible node IDs: Create a general visibleNodeSet = new Set(). Iterate through all grid cells from column 48 to 55 and row 312 to 316. For each grid cell (col, row), add all node IDs from the spatialGrid[col][row] Set to the visibleNodeSet.

[0069] (3) Precise Collision Detection: The visibleNodeSet obtained through mesh query consists of "potentially visible" nodes, because a node is registered within the mesh covered by the viewport, but its AABB may not intersect with the viewport boundary (e.g., the node is in a mesh corner, but the viewport does not cover that corner). Preferably, each node in the visibleNodeSet can be precisely checked for AABB intersection with the viewport rectangle. However, the order of magnitude of this operation has been reduced from hundreds of thousands to thousands, and the overhead is very small. In practical applications, this step is sometimes omitted because when the mesh is dense enough, the "potentially visible" set is already very close to the "truly visible" set.

[0070] Furthermore, the method also includes: Monitor events that change the position or shape of nodes on the canvas; When a change is detected in a node, 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. When the canvas is scaled or panned, the visual determination step is re-executed.

[0071] Specifically, in this embodiment, the system monitors the `positionChanged` event of nodes. When node A moves from its old position `P_old` to its new position `P_new`, the system calculates the list of previously registered mesh cells (e.g., `[(50,315)]`) based on `P_old`, and then removes its node ID from the Set of these cells. A new list of mesh cells is calculated based on `P_new`, and the node ID is re-registered. This operation should be atomic, or ensured to be unmodified during rendering queries to avoid dirty reads.

[0072] When the user pans or zooms the canvas, the viewport's (viewX, viewY, viewWidth, viewHeight) changes. The system only needs to recalculate the grid extent covered by the viewport and collect a new visibleNodeSet. The grid index structure spatialGrid itself remains completely unchanged, resulting in extremely fast response times.

[0073] Furthermore, in the second aspect, a custom graph node visualization system based on dynamic rendering of business attributes is proposed, such as... Figure 2 As shown, the system includes: The configuration parsing module 301 is used to receive node style configuration data in JSON format, perform validity verification on the schema of the node style configuration data, and parse the valid node style configuration data into an internal object model; the internal object model includes graphic element definitions, style attributes, display rules, and position information; The rule evaluation module 302 is used to obtain the business attribute data of the current node, dynamically evaluate the display conditions of each graphic element according to the display rules in the internal object model, and generate a set of graphic elements to be rendered; wherein, the display rules support logical operations and comparison operations on the node's business attributes; The layered rendering module 303 is used to render the set of graphic elements to be rendered layer by layer for the current node in order to realize node drawing; the layered rendering includes at least rendering the basic shape and fixed style of the node first, and then rendering the dynamic element layer that meets the display rules according to the order of the set of graphic elements.

[0074] The above description is merely an embodiment of this application and is not intended to limit the scope of protection of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of protection of this application.

Claims

1. A method for visualizing custom graph nodes based on dynamic rendering of business attributes, characterized in that, include: Receive node style configuration data in JSON format, validate the schema of the node style configuration data, and parse the valid node style configuration data into an internal object model; the internal object model includes graphic element definitions, style attributes, display rules, and position information; The system acquires the business attribute data of the current node, dynamically evaluates the display conditions of each graphic element according to the display rules in the internal object model, and generates a set of graphic elements to be rendered; wherein, the display rules support logical operations and comparison operations on the node's business attributes. The current node is rendered layer by layer, and the set of graphic elements to be rendered is rendered in sequence to realize node drawing; the layered rendering includes at least rendering the basic shape and fixed style of the node first, and then rendering the dynamic element layer that meets the display rules according to the order of the set of graphic elements.

2. The method for visualizing custom graph nodes based on dynamic rendering of business attributes according to claim 1, characterized in that, Before rendering the set of graphic elements to be rendered layer by layer for the current node, the method further includes a coordinate transformation step: in the Canvas drawing environment, for the current node to be rendered, 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 establish a local coordinate system centered on the node. The step of rendering the set of graphic elements to be rendered layer by layer to the current node includes: rendering the set of graphic elements to be rendered layer by layer in the local coordinate system. And after rendering all the graphic elements of the current node, restore the global coordinate system of the Canvas drawing environment to the state before the coordinate transformation step.

3. The method for visualizing custom graph nodes based on dynamic rendering of business attributes according to claim 2, characterized in that, The step of validating the schema of the node style configuration data and parsing the valid node style configuration data into an internal object model includes: identifying frequently accessed style attributes during the parsing process, precompiling the style attributes into a fast-readable object format and caching them to avoid repeatedly parsing JSON configuration during the rendering process.

4. The method for visualizing custom graph nodes based on dynamic rendering of business attributes according to claim 3, characterized in that, The step of validating the schema of the node style configuration data and parsing the valid node style configuration data into an internal object model includes: During the validity verification process, the system checks for errors such as missing required fields or mismatched field value types in the configuration data. If an error is detected, a structured exception message containing an error description is output, and the parsing of the current configuration and subsequent rendering processes are aborted.

5. The method for visualizing custom graph nodes based on dynamic rendering of business attributes according to claim 2, characterized in that, The step of rendering the set of graphic elements to be rendered layer by layer on the current node includes: According to the index order of the predefined array of graphical elements in the internal object model, each graphical element description object is accessed sequentially; For the currently accessed graphical element, the rule evaluation engine is invoked, taking the business attribute data of the current node as input, executing the display rules associated with the graphical element, and obtaining a boolean judgment result; According to the determination result, if it is true, the current graphic element is added to the rendering queue of this frame; if it is false, the element is immediately skipped, not added to the queue, and the process continues to traverse the next element. After traversing and filtering all graphic elements of the current node, the actual Canvas drawing API call is executed for each element in the rendering queue in turn, and it is drawn onto the transformed node local coordinate system.

6. The method for visualizing custom graph nodes based on dynamic rendering of business attributes according to claim 1, characterized in that, Before rendering the set of graphic elements to be rendered layer by layer on the current node, the method further includes: Based on the current visible area boundary of the Canvas, calculate and determine whether the node is located within the visible area; If a node is completely outside the visible area, all layered rendering steps for that node are skipped to optimize rendering performance.

7. The method for visualizing custom graph nodes based on dynamic rendering of business attributes according to claim 6, characterized in that, Based on the current visible area boundary of the Canvas, calculate and determine whether a node is within the visible area, including: Mesh generation steps: Divide the entire canvas coordinate system into a static two-dimensional mesh composed of uniformly sized grid cells; Node registration steps: Traverse all nodes to be rendered, calculate the axial bounding box of each node, and determine one or more mesh cells that the node covers or intersects based on the spatial position of the bounding box, and register the node identifier to these corresponding mesh cells; Visibility determination steps: Calculate the bounding box of the visible area based on the translation and scaling parameters of the current canvas, and quickly determine the set of mesh cells covered by the viewport bounding box; for a node to be rendered, the node is determined to be a potential visible node only if its registered set of mesh cells intersects with the set of mesh cells.

8. The method for visualizing custom graph nodes based on dynamic rendering of business attributes according to claim 7, characterized in that, The method further includes: Monitor events that change the position or shape of nodes on the canvas; When a change is detected in a node, 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. When the canvas is scaled or panned, the visual determination step is re-executed.

9. A custom graph node visualization system based on dynamic rendering of business attributes, characterized in that, include: The configuration parsing module is used to receive node style configuration data in JSON format, verify the validity of the schema of the node style configuration data, and parse the valid node style configuration data into an internal object model; the internal object model includes graphic element definitions, style attributes, display rules, and position information; The rule evaluation module is used to obtain the business attribute data of the current node, dynamically evaluate the display conditions of each graphic element according to the display rules in the internal object model, and generate a set of graphic elements to be rendered; wherein, the display rules support logical operations and comparison operations on the node's business attributes; The layered rendering module is used to render the set of graphic elements to be rendered layer by layer for the current node in order to realize node drawing; the layered rendering includes at least rendering the basic shape and fixed style of the node first, and then rendering the dynamic element layer that meets the display rules according to the order of the set of graphic elements.

10. An electronic device, the electronic device comprising: One or more processors, a memory for storing one or more computer programs; characterized in that the computer programs are configured to be executed by the one or more processors, the programs including steps for performing a custom graph node visualization method based on dynamic rendering of business attributes as described in any one of claims 1-8.

Images