Mesh structure brain map-based information visualization processing method and system

Abstract

The invention provides an information visualization processing method and system based on a brain graph of a net structure, and relates to the technical field of information interaction processing, and the method is characterized by comprising the following steps: 1, rendering a plurality of information nodes in a canvas area, and storing the data structure of the information nodes based on a graph structure, any node is allowed to have a plurality of father nodes and a plurality of child nodes; 2, detecting a cursor position or a node selection state of a user in real time, rendering a suspension operation component at a corresponding area position after entering an activated state, and performing option guide; step 3, according to the operation component in the step 2, guiding and selecting to create a new node or establish a connection relationship; and step 4, according to the connection relationship and the physical attribute between the nodes in the step 3, calculating the coordinate position of each node in real time by using a force steering algorithm, and updating canvas display through a rendering engine. The method has the advantages that a complex knowledge network is constructed more directly and clearly and displayed, the overall thinking efficiency is improved, and use and operation are convenient.

Description

Technical Field

[0001] This invention relates to the field of information interaction processing technology, and in particular to an information visualization processing method and system based on a network structure mind map. Background Technology

[0002] Mind mapping software greatly facilitates users in organizing and recording their logical thought processes, significantly reducing workload and aiding in smoother thinking. However, current software generally employs a tree-structured data model as its core architecture. This model requires a central root node, with each child node adhering to a single parent node principle, forming a strict hierarchical system. Its specific drawbacks include: a rigid architecture that forces users to compress non-linear thought processes into a strict parent-child hierarchy, failing to express complex relationships such as circular dependencies, cross-references, and multiple affiliations. Furthermore, cross-level connections are typically used as visual aids rather than part of the data structure, thus limiting their ability to participate in layout calculations and restricting the overall representation of relationships.

[0003] When building complex relationships, multiple operations need to be performed, which severely disrupts the user's thought process and makes the creative process disjointed.

[0004] Traditional mind maps use radial or hierarchical layouts, resulting in sparse edge nodes and overcrowded central nodes, leading to uneven overall space utilization. At the same time, cross-level connections may pass through unrelated nodes, causing node occlusion and visual confusion.

[0005] Therefore, there is an urgent need for a method and system for visualizing and processing information based on network structure mind maps that can quickly express multiple thought processes and perform complex connections and smooth displays. Summary of the Invention

[0006] To achieve the above-mentioned objectives, the technical solution adopted by this invention is as follows:

[0007] A method for information visualization based on a network structure mind map includes the following steps: Step 1: Render several information nodes in a canvas area. The data structure of the information nodes is stored based on a graph structure, allowing any node to have multiple parent nodes and multiple child nodes.

[0008] Step 2: Real-time detection of user cursor position or node selection status; once activated, render floating operation components in the corresponding area to guide options.

[0009] Step 3: Follow the instructions in Step 2 to select either to create a new node or establish a connection.

[0010] Step 4: Based on the connection relationships and physical properties between nodes in Step 3, use the force-directed algorithm to calculate the coordinate positions of each node in real time, and update the canvas display through the rendering engine.

[0011] As an improvement, the data structure of the information node in step 1 is stored based on the adjacency list or edge set array in graph theory. Each node includes a displacement identifier ID, coordinate position, content data, style attributes, and a set of connection relationships.

[0012] Graph structures support many-to-many connections between any nodes, allow a single node to have multiple parent and child nodes, and support the creation and maintenance of directed edges, undirected edges, bidirectional edges, and self-loop edges.

[0013] As an improvement, in step 2, if the cursor hovers at the same position for more than a preset time, the position is automatically determined to be active.

[0014] After the position becomes active, a semi-transparent operation component is rendered to the right of the target node position. The operation component moves with the node using absolute positioning. The operation component includes two circular function buttons, which are used to create a new node and establish a connection relationship, respectively.

[0015] As an improvement, if the cursor position is occupied when creating a new node in step 3, the space occupancy of the target node in the preset orientation is calculated. If it is already occupied, the offset coordinates are calculated based on the anti-overlap algorithm, and the node is placed in a conflict-free area. After the node is created, its relative position with its sibling nodes is adjusted through the fan-shaped expansion logic.

[0016] As an improvement, the specific steps of using the force-oriented algorithm to calculate the coordinate position of each node in real time in step 4 include: Step 1, setting Coulomb repulsion force for all nodes to make the nodes repel each other;

[0017] Step 2: Apply Hooke's gravity to nodes that are connected to simulate the effect of spring traction;

[0018] Step 3: Introduce the parameters of central gravity and air resistance so that the system reaches a stable equilibrium state with the lowest energy after iterative calculation;

[0019] Step 4: For large-scale scenarios with more than 500 nodes, a spatial partitioning parallel computing strategy is adopted to divide the canvas into multiple sub-regions. The force-directed calculation of each sub-region is executed in an independent Web Worker thread, and the calculation results are finally merged.

[0020] As an improvement, a quadtree-based spatial index collision detection mechanism and automatic avoidance are also included. The specific steps include: Step 1: Construct a quadtree index covering the entire canvas area and insert each node into the corresponding leaf node of the quadtree according to its bounding box.

[0021] Step 2: When a node's position changes, quickly retrieve all neighboring nodes within a preset safe distance using a quadtree;

[0022] Step 3: If node encirclement and overlap are detected, the system calculates the pushing vector based on the overlapping area and direction, and pushes the colliding nodes along the repulsive force direction until they no longer overlap.

[0023] As an improvement, when rendering the connecting lines of the canvas in step 4, an obstacle avoidance algorithm is used to ensure that the connecting lines do not pass through irrelevant nodes. The specific steps include: Step 1, treating the bounding boxes of all nodes as obstacle areas, constructing a grid-based accessibility map, and marking each grid cell as passable or impassable.

[0024] Step 2: Use the A* pathfinding algorithm to calculate the optimal path from the starting point to the ending point of the connecting line. The path cost function takes into account the path length, the number of turns, and the distance to obstacles.

[0025] Step 3: Smoothly fit the discrete path point sequence output by the A* algorithm using a cubic Bézier curve to ensure that the connecting line presents a natural and smooth curve shape.

[0026] Step 4. For multiple parallel connection lines between the same pair of nodes, calculate the normal offset of each connection line so that the multiple connection lines are distributed in an arc shape, do not overlap, and maintain visual distinction.

[0027] As an improvement, the rendering engine in step 4 adopts virtualization rendering technology, the specific steps of which include: Step 1, calculating the boundary rectangle of the current viewport in the canvas coordinate system in real time, and only drawing the nodes and connecting lines within the viewport and the surrounding 200-pixel buffer.

[0028] Step 2: Use placeholders to represent graphic elements outside the viewport or skip rendering them completely, which greatly reduces the number of graphic objects that need to be processed per frame.

[0029] Step 3: Implement a layered rendering architecture, separating the static background layer, connector layer, node layer, and interactive control layer for rendering, allowing independent updates to different layers;

[0030] Step 4: Utilize the batch drawing capability of the Canvas 2D API to merge the rendering commands of multiple nodes into a single drawing call, reducing GPU state switching overhead.

[0031] Step 5: Implement smooth 60fps animation rendering using the requestAnimationFrame API, incrementally updating node positions after each layout iteration to avoid visual jumps.

[0032] An information visualization processing system based on a network structure mind map includes a data management module: used to store and manage node objects and edge objects based on a graph structure, supporting many-to-many associations and self-loop connections;

[0033] Interactive control module: Used to handle user mouse and touch events, and implement dual-button operation logic, canvas drag and zoom functions;

[0034] Layout calculation module: It has a built-in force-guided algorithm engine and collision detection engine, which are responsible for calculating the topological coordinates of nodes in real time;

[0035] Graphics rendering module: Based on Canvas or WebGL technology, it draws nodes, connecting lines, and UI auxiliary elements according to the layout calculation results;

[0036] Path planning module: responsible for calculating the geometric path of the connecting lines, enabling automatic obstacle avoidance and curve smoothing.

[0037] The beneficial effects of this invention are: by using a graph data structure to replace the traditional tree structure, it supports many-to-many connections between any nodes, including directed, undirected, bidirectional and self-loop connections, and can accurately simulate the associative thinking process;

[0038] By setting up dual-button shortcut operations, the overall operation time can be shortened, the smoothness of creative design can be improved, and the connection cable preview display can reduce the error rate and improve the overall user experience.

[0039] By optimizing the layout through force-oriented computation, we can simulate physical particle systems and repulsive forces between nodes, which allows closely related nodes to automatically cluster together, achieving a natural expansion of the topology and a more reasonable and uniform overall layout.

[0040] By employing the A* pathfinding algorithm combined with Bézier curve fitting, connecting lines can automatically bypass irrelevant nodes, avoiding wireframe occlusion and further improving the overall display effect. Attached Figure Description

[0041] Figure 1 This is a flowchart of an information visualization processing method based on a network structure mind map according to the present invention. Detailed Implementation

[0042] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of the embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0043] It should be noted that the terms "first" and "second" in this application are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of that feature. In the description of this application, "multiple" means at least two, such as two, three, etc., unless otherwise explicitly specified. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or apparatus that includes a series of steps or units is not limited to the listed steps or units, but may optionally include steps or units not listed, or may optionally include other steps or units inherent to these processes, methods, products, or apparatuses.

[0044] like Figure 1 As shown, an information visualization processing method based on a network structure mind map includes the following steps: Step 1: Render several information nodes in the canvas area. The data structure of the information nodes is stored based on a graph structure, allowing any node to have multiple parent nodes and multiple child nodes; Step 2: Detect the user's cursor position or node selection status in real time. After entering the active state, render a floating operation component in the corresponding area to guide the selection; Step 3: Select to create a new node or establish a connection relationship according to the operation component guidance in Step 2; Step 4: Calculate the coordinate position of each node in real time using a force-directed algorithm based on the connection relationship and physical properties between nodes in Step 3, and update the canvas display through the rendering engine.

[0045] In step 1, the data structure of the information nodes is stored based on adjacency lists or edge sets in graph theory. Each node includes a displacement identifier (ID), coordinates, content data, style attributes, and a set of connection relationships. The graph structure supports many-to-many connections between any nodes, allowing a single node to have multiple parent and child nodes simultaneously. It also supports the creation and maintenance of directed edges, undirected edges, bidirectional edges, and self-loop edges. The system manages the relationships between nodes and edges through an in-memory graph data structure and establishes a bidirectional index to support fast querying of direct and indirect associations between nodes.

[0046] In step 2, if the cursor hovers at the same position for more than a preset time, the position is automatically determined to be active. After the position becomes active, a semi-transparent operation component is rendered to the right of the target node. The operation component follows the node's movement using absolute positioning. The operation component includes two circular function buttons, which are used to create a new node and establish a connection relationship, respectively. The display duration of the operation component is until the user's cursor remains within the node area or until the user triggers other operations.

[0047] In step 3, if the cursor position is occupied when creating a new node, the space occupied by the target node in the preset orientation is calculated. If it is already occupied, the offset coordinates are calculated based on the anti-overlap algorithm, and the node is placed in a conflict-free area. After the node is created, its relative position with its sibling nodes is adjusted through a fan-shaped expansion logic. At this time, the new node inherits the default style settings of the current canvas, and the system automatically establishes an undirected connection edge between the current target node and the new node, and adds this edge to the edge set of the graph data structure.

[0048] Step 4, which uses a force-directed algorithm to calculate the coordinates of each node in real time, includes the following steps: Step 1: Set Coulomb repulsion for all nodes to make them repel each other; Step 2: Set Hooke's gravity for nodes with connections to simulate the effect of a spring; Step 3: Introduce central gravity and air resistance parameters to make the system reach a stable equilibrium state with the lowest energy after iterative calculation; Step 4: For large-scale scenes with more than 500 nodes, a spatial partitioning parallel computing strategy is adopted to divide the canvas into multiple sub-regions. The force-directed calculation of each sub-region is executed in an independent Web Worker thread, and the calculation results are finally merged.

[0049] It also includes a quadtree-based spatial index collision detection mechanism and automatic avoidance, the specific steps of which are: Step 1, construct a quadtree index covering the entire canvas area, and insert each node into the corresponding leaf node of the quadtree according to its bounding box; Step 2, when the node position changes, quickly retrieve all neighboring nodes within a preset safe distance around it through the quadtree; Step 3, if node encirclement and overlap are detected, the system calculates the pushing vector according to the overlapping area and direction, and pushes the colliding node along the repulsive force direction until it no longer overlaps.

[0050] In step 4, when rendering the connecting lines on the canvas, an obstacle avoidance algorithm is used to ensure that the connecting lines do not pass through irrelevant nodes. The specific steps include: Step 1, treating the bounding boxes of all nodes as obstacle areas and constructing a grid-based accessibility map, with each grid cell marked as passable or impassable; Step 2, using the A* pathfinding algorithm to calculate the optimal path from the starting point to the ending point of the connecting line, with the path cost function comprehensively considering path length, number of turns, and distance to obstacles; Step 3, smoothing the discrete path point sequence output by the A* algorithm using a cubic Bézier curve to ensure that the connecting lines present a natural and smooth curve shape; Step 4, for multiple parallel connecting lines between the same pair of nodes, calculating the normal offset of each connecting line so that the multiple connecting lines are distributed in an arc shape, do not overlap, and maintain visual distinction.

[0051] When in use, the path planning algorithm is dynamically selected based on the density of obstacles: direct Bézier curves are used in sparse areas, the A* algorithm is used in medium-density areas, and path planning based on the visibility graph is used in high-density areas; different style strategies are applied to different types of connectors: thin dashed lines are used for conceptual associations, thick solid lines are used for strong associations, solid lines with arrows are used for causal associations, and wavy lines are used for contrast relationships; interactive functionality for connectors is implemented, allowing users to directly drag the control points of connectors to adjust the curve shape, and the system remembers user-defined path shapes and tries to maintain them when the layout is updated; animation effects for connectors are added, playing a drawing animation from the source node to the target node when a new connection is established, and implementing particle flow effects along connectors in data flow scenarios.

[0052] In step 4, the rendering engine employs virtualization rendering technology, which includes the following steps: Step 1: Real-time calculation of the boundary rectangle of the current viewport in the canvas coordinate system, and actual drawing only of nodes and connecting lines within the viewport and a 200-pixel buffer around it; Step 2: Using placeholders to represent or completely skipping the rendering of graphic elements outside the viewport, significantly reducing the number of graphic objects that need to be processed per frame; Step 3: Implementing a layered rendering architecture, separating the rendering of the static background layer, connecting line layer, node layer, and interactive control layer, allowing independent updates of different layers; Step 4: Utilizing the batch drawing capability of the Canvas 2D API, merging the rendering commands of multiple nodes into a single drawing call, reducing GPU state switching overhead; Step 5: Implementing smooth 60fps animation rendering through the requestAnimationFrame API, incrementally updating node positions after each layout iteration to avoid visual jumps.

[0053] When in use, it prioritizes rendering high-detail graphics of the area currently of interest to the user, while delaying the rendering of low-detail graphics in edge areas, dynamically adjusting rendering priority based on user interaction. It employs a WebGL hardware-accelerated rendering pipeline, packaging the geometric data of nodes and connections into vertex buffer objects, and rendering a large number of graphic elements with the same style through a single draw call. It implements incremental rendering based on dirty rectangles, redrawing only the parts of the canvas that have changed, reducing unnecessary full canvas redraws. It adds a GPU particle system to render dynamic data flow between nodes, focus diffusion effects, and node motion trajectories during the layout process, enhancing visual expressiveness.

[0054] An information visualization processing system based on a network structure mind map includes a data management module for storing and managing node and edge objects based on a graph structure, supporting many-to-many associations and self-loop connections; an interaction control module for handling user mouse and touch events, implementing dual-button operation logic, canvas dragging and zooming functions; a layout calculation module with a built-in force-guided algorithm engine and collision detection engine, responsible for real-time calculation of node topological coordinates; a graphics rendering module based on Canvas or WebGL technology, drawing nodes, connecting lines, and UI auxiliary elements according to the layout calculation results; and a path planning module responsible for calculating the geometric path of connecting lines, achieving automatic obstacle avoidance and curve smoothing.

[0055] During use, when drawing connecting lines, the system first obtains the coordinates of the starting point A and the ending point B. Then, it queries the quadtree to obtain all other nodes within the rectangles A and B as the obstacle set.

[0056] Construct a simplified grid map, marking grids containing obstacles as impassable. Use the A* algorithm to search for the set of shortest path points from A to B.

[0057] Finally, the `CanvasRenderingContext2D.bezierCurveTo` method is used to fit the path point set into a smooth third-order Bézier curve. If there is a bidirectional connection between A and B, the control points are offset by 20px to each side according to the normal direction of the connection direction vector, forming a visual double-arc separation effect.

[0058] The above description is merely a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for information visualization processing based on network structure mind maps, characterized in that, Includes the following steps: Step 1: Render several information nodes in the canvas area. The data structure of the information nodes is stored based on a graph structure, allowing any node to have multiple parent nodes and multiple child nodes. Step 2: Real-time detection of user cursor position or node selection status; once activated, render floating operation components in the corresponding area to guide options. Step 3: Follow the instructions in Step 2 to select either to create a new node or establish a connection. Step 4: Based on the connection relationships and physical properties between nodes in Step 3, use the force-directed algorithm to calculate the coordinate positions of each node in real time, and update the canvas display through the rendering engine.

2. The information visualization processing method based on a network structure mind map according to claim 1, characterized in that, In step 1, the data structure of the information node is stored based on the adjacency list or edge set array in graph theory. Each node includes a displacement identifier ID, coordinate position, content data, style attributes, and a set of connection relationships. Graph structures support many-to-many connections between any nodes, allow a single node to have multiple parent and child nodes, and support the creation and maintenance of directed edges, undirected edges, bidirectional edges, and self-loop edges.

3. The information visualization processing method based on a network structure mind map according to claim 1, characterized in that, In step 2, if the cursor hovers at the same position for more than a preset time, the position is automatically determined to be active. After the position becomes active, a semi-transparent operation component is rendered to the right of the target node position. The operation component moves with the node using absolute positioning. The operation component includes two circular function buttons, which are used to create a new node and establish a connection relationship, respectively.

4. The information visualization processing method based on a network structure mind map according to claim 1, characterized in that, In step 3, if the cursor position is occupied when creating a new node, the space occupancy of the target node's preset orientation is calculated. If it is already occupied, the offset coordinates are calculated based on the anti-overlap algorithm, and the node is placed in a conflict-free area. After the node is created, its relative position with its sibling nodes is adjusted through the fan-shaped expansion logic.

5. The information visualization processing method based on a network structure mind map according to claim 1, characterized in that, The specific steps of using the force-oriented algorithm to calculate the coordinate position of each node in real time in step 4 include: Step 1, setting Coulomb repulsion force for all nodes so that the nodes repel each other; Step 2: Apply Hooke's gravity to nodes that are connected to simulate the effect of spring traction; Step 3: Introduce the parameters of central gravity and air resistance so that the system reaches a stable equilibrium state with the lowest energy after iterative calculation; Step 4: For large-scale scenarios with more than 500 nodes, a spatial partitioning parallel computing strategy is adopted to divide the canvas into multiple sub-regions. The force-directed calculation of each sub-region is executed in an independent Web Worker thread, and the calculation results are finally merged.

6. The information visualization processing method based on a network structure mind map according to claim 1, characterized in that, It also includes a quadtree-based spatial index collision detection mechanism and automatic avoidance, the specific steps of which include: Step 1, constructing a quadtree index covering the entire canvas area, and inserting each node into the corresponding leaf node of the quadtree according to its bounding box; Step 2: When a node's position changes, quickly retrieve all neighboring nodes within a preset safe distance using a quadtree; Step 3: If node encirclement and overlap are detected, the system calculates the pushing vector based on the overlapping area and direction, and pushes the colliding nodes along the repulsive force direction until they no longer overlap.

7. The information visualization processing method based on a network structure mind map according to claim 1, characterized in that, In step 4, when rendering the connecting lines of the canvas, an obstacle avoidance algorithm is used to ensure that the connecting lines do not pass through irrelevant nodes. The specific steps include: Step 1, treating the bounding boxes of all nodes as obstacle areas, constructing a grid-based accessibility map, and marking each grid cell as passable or impassable. Step 2: Use the A* pathfinding algorithm to calculate the optimal path from the starting point to the ending point of the connecting line. The path cost function takes into account the path length, the number of turns, and the distance to obstacles. Step 3: Smoothly fit the discrete path point sequence output by the A* algorithm using a cubic Bézier curve to ensure that the connecting line presents a natural and smooth curve shape. Step 4. For multiple parallel connection lines between the same pair of nodes, calculate the normal offset of each connection line so that the multiple connection lines are distributed in an arc shape, do not overlap, and maintain visual distinction.

8. The information visualization processing method based on a network structure mind map according to claim 1, characterized in that, In step 4, the rendering engine uses virtualization rendering technology. The specific steps include: Step 1, calculating the boundary rectangle of the current viewport in the canvas coordinate system in real time, and only drawing the nodes and connecting lines within the viewport and the surrounding 200-pixel buffer. Step 2: Use placeholders to represent graphic elements outside the viewport or skip rendering them completely, which greatly reduces the number of graphic objects that need to be processed per frame. Step 3: Implement a layered rendering architecture, separating the static background layer, connector layer, node layer, and interactive control layer for rendering, allowing independent updates to different layers; Step 4: Utilize the batch drawing capability of the Canvas 2D API to merge the rendering commands of multiple nodes into a single drawing call, reducing GPU state switching overhead. Step 5: Implement smooth 60fps animation rendering using the requestAnimationFrame API, incrementally updating node positions after each layout iteration to avoid visual jumps.

9. An information visualization processing system based on a network structure mind map, characterized in that, Includes a data management module: used for storing and managing node and edge objects based on a graph structure, supporting many-to-many associations and self-loop connections; Interactive control module: Used to handle user mouse and touch events, and implement dual-button operation logic, canvas drag and zoom functions; Layout calculation module: It has a built-in force-guided algorithm engine and collision detection engine, which are responsible for calculating the topological coordinates of nodes in real time; Graphics rendering module: Based on Canvas or WebGL technology, it draws nodes, connecting lines, and UI auxiliary elements according to the layout calculation results; Path planning module: responsible for calculating the geometric path of the connecting lines, enabling automatic obstacle avoidance and curve smoothing.

Images