A method for dynamic interactive display of knowledge graph based on 3D hierarchical ring

Abstract

This invention relates to the field of knowledge graph technology, specifically disclosing a dynamic interactive display method for knowledge graphs based on 3D layered rings, comprising the following steps: S1, dividing knowledge entities into N concentric ring layers according to semantic hierarchy, with entities in each layer evenly distributed along a ring track, achieving vertical spatial isolation between layers through the height difference parameter LAYER_HEIGHT, and dynamically controlling the node distribution density of each layer through the radius parameter LEVEL_BOX_radius; S2, using the Three.js framework combined with WebGL and CSS2DRenderer for hybrid rendering; S3, responding to mouse interaction events, implementing 360° free rotation, scroll wheel zoom, and entity focusing through OrbitControls, and using the GSAP animation engine to achieve smooth switching between 2D / 3D views, with the 2D view automatically locking the top-down view at y=25; S4, constructing an association diffusion model based on raycaster collision detection. The modular design supports extended multi-level association visualization, custom entity type mapping, and other functions, making it suitable for knowledge graph scenarios in multiple fields such as education and finance.

Description

Technical Field

[0001] This invention relates to the field of knowledge graph technology, specifically to a dynamic interactive display method for a 3D hierarchical ring-shaped knowledge graph. Background Technology

[0002] Traditional knowledge graphs suffer from the following technical bottlenecks in visualization and interactive display:

[0003] Visual clutter caused by two-dimensional layout: Existing solutions mostly use two-dimensional planes (such as tree diagrams and network diagrams) to display knowledge entities. As the number of nodes increases, edge nodes are prone to clustering, and the lines intersect severely, resulting in a significant decrease in the readability of the graph. At the same time, hierarchical relationships are only distinguished by color or lines, lacking a sense of depth in three-dimensional space, making it difficult to intuitively express complex relationships.

[0004] Limitations in Interactive Capabilities and Perspective Exploration: Static knowledge graphs only support viewing from a single perspective and cannot be fully explored through dynamic rotation, zooming, or other operations. Users find it difficult to focus on details or grasp the overall structure from different angles, limiting the efficiency of understanding complex knowledge relationships.

[0005] Defects in multi-view switching experience: Traditional solutions have abrupt transitions when switching between 2D and 3D views, causing users to lose their perspective and experience interruptions in spatial cognition; operation relies on manually adjusting the camera position and zoom, which has a high learning curve and cannot achieve smooth view transitions.

[0006] Insufficient information expression from related highlighting methods: When it is necessary to highlight related nodes, traditional methods either hide non-related nodes, resulting in information loss, or simply highlight them with simple color changes, resulting in insufficient contrast. Connecting highlighting methods (such as bolding or flashing) are prone to interference with other elements, making it difficult to balance information completeness and emphasis. Summary of the Invention

[0007] To address the shortcomings of existing technologies, this invention provides a dynamic interactive display method for knowledge graphs based on 3D hierarchical rings, which solves the problems mentioned in the background technology.

[0008] To achieve the above objectives, the present invention provides the following technical solution: a dynamic interactive display method for a 3D hierarchical ring-shaped knowledge graph, comprising the following steps:

[0009] S1. Divide the knowledge entities into N concentric ring layers according to semantic hierarchy, N≥3. The entities in each layer are evenly distributed along the ring track. Vertical spatial isolation between layers is achieved by the height difference parameter LAYER_HEIGHT. The distribution density of nodes in each layer is dynamically controlled by the radius parameter LEVEL_BOX_radius.

[0010] S2. The Three.js framework is used in combination with WebGL and CSS2DRenderer for hybrid rendering, and Vue3 reactive data binding is used to realize real-time synchronization between knowledge graph data and 3D models.

[0011] S3. Responds to mouse interaction events, enabling 360° free rotation, scroll wheel zoom, and entity focus through OrbitControls. Combined with the GSAP animation engine, it achieves smooth switching between 2D and 3D views. The 2D view automatically locks the top-down perspective, y=25.

[0012] S4. Construct an association diffusion model based on Raycaster collision detection, perform intelligent grayscale processing on non-associative nodes, and highlight associated nodes and red connecting lines.

[0013] Preferably, the radius and height of the target layer, resource layer, knowledge layer, problem layer, and capability layer satisfy the dynamic calculation formula:

[0014] ;

[0015] in, The innermost base radius (unit: pixels). Base height difference (unit: pixels) The radius expansion factor, The levels are numbered sequentially: 1 corresponds to the target level, 2 to the resource level, 3 to the knowledge level, 4 to the problem level, and 5 to the capability level.

[0016] Preferably, the dynamic adjustment mechanism for node distribution density includes:

[0017] Calculate the ideal density threshold: ;

[0018] When the actual density exceeds the threshold, an adaptive radius expansion is triggered. ;

[0019] in, The pixel represents the minimum spacing between nodes. The number of excess nodes. For expansion factor, The radius of the current layer. This represents the number of nodes in the current layer.

[0020] Preferably, the 2D / 3D view switching includes a synchronized animation sequence:

[0021] Perform displacement interpolation on the solid along the Y-axis: ;

[0022] The camera performs pitch angle interpolation synchronously: ;

[0023] in: The attenuation coefficient is... For animation duration, The initial pitch angle of the camera. In 2D mode, it is 25°. For the initialization of the entity coordinate, For the goal coordinate, It is a time variable.

[0024] Preferably, the intelligent grayscale processing employs a multi-level associative highlighting algorithm:

[0025] First-level related nodes retain their original colors, while second-level related nodes apply transparency based on topological distance. ;

[0026] Unified grayscale processing for non-associated nodes: ;

[0027] in, is the transparency value, d is the topological distance, and R, G, and B are the three channel values ​​of the original color.

[0028] Preferably, the mouse interaction includes a damped inertial control model:

[0029] The integral relationship between rotational angular velocity and drag force: ;

[0030] The angular velocity decays exponentially after release: ;

[0031] in: Angular velocity (unit: ), The drag force (normalized value). This is the force conversion coefficient. The initial angular velocity, As the attenuation factor, It is a time variable.

[0032] Preferably, the dynamic interactive display method for knowledge graphs based on 3D hierarchical rings further includes a tag intelligent orientation mechanism:

[0033] Tag orientation is calculated using quaternion spherical linear interpolation (Slerp): ;

[0034] Real-time update of label normal direction to scene center point: ;

[0035] in, Let be the orientation quaternion at time t. Initial orientation, The target orientation is T, and the interpolation duration is T. It is the normal vector. The coordinates of the center point of the scene. The coordinates of the label position;

[0036] The initialization phase includes a data-driven rendering process, with the following specific steps:

[0037] Parsing JSON knowledge graph data and mapping it to 3D entities:

[0038] ;

[0039] in, This represents the input knowledge graph JSON data. This represents the mapping rules from entity types to 3D models, expressed through functions. Map the knowledge graph information in JSON data to entities in a 3D scene;

[0040] Solid colors use HSV encoding:

[0041] ;

[0042] in, For entity type ID, the range of values ​​is: , Maximum number of entity types, hue Calculated based on the entity type ID, ensuring that each entity type has a unique color and saturation. Set to 0.8, brightness Set it to 0.9 to ensure the visibility of entities in the scene.

[0043] Preferably, the dynamic interactive display method for knowledge graphs based on 3D hierarchical rings further includes a view reset mechanism, which is implemented as follows:

[0044] Save initial state parameters:

[0045] ;

[0046] in, This represents the scene state after initialization, including the initial camera position coordinates. The initial set of positions of all entities The initial position set of all labels and the initial positions and parameter sets of all ring layers. ;

[0047] Restores the initial state when a reset is triggered:

[0048] ;

[0049] When the view reset mechanism is activated, the current scene state variables will be... Set to initial state This restores the scene to its initial state, ensuring that users can reset the scene to its initial state at any time.

[0050] Preferably, the steps for initializing a 3D scene include:

[0051] Step 1.1: Create a Three.js scene object, initialize camera parameters, set initial position and orientation, and set the default focal length to 500; Step 1.2: Instantiate CSS2DRenderer and WebGL renderer, configure background color to #F8F9FA, and exposure to 1.2; Step 1.3: Add mouse click event listener, detect the clicked entity through raycaster, and trigger focus highlight logic; Step 1.4: Initialize the OrbitControls controller, set the scroll wheel zoom sensitivity to 0.5, and the inertial rotation smoothness to 0.8.

[0052] Preferably, the steps for dynamically controlling the node distribution density of each layer include:

[0053] Step 2.1: Clear the data from the previous scenario, parse the backend JSON knowledge graph, and extract entity types, relationships, and attribute values; Step 2.2: Assign entities to the corresponding levels according to their types, using the formula... Calculate the layer radius;

[0054] Step 2.3: Perform a ring-shaped uniform distribution calculation for each layer of solids: Step 2.3.1: Calculate the layer perimeter. By number of entities Allocation angle interval Step 2.3.2: According to (x,y,z)= Calculate the spatial coordinates of the entity. For entity serial number, ;

[0055] Step 2.4: Create connections between entities, use Bézier curves to optimize the cross display, and dynamically adjust the connection width according to the connection strength.

[0056] This invention provides a method for dynamically interactively displaying a knowledge graph based on a 3D hierarchical ring, which has the following beneficial effects:

[0057] 1. Enhanced visualization efficiency through three-dimensional layout: An N-layer (N≥3) concentric ring-shaped hierarchical structure is adopted, and physical isolation of the layers is achieved through the height difference parameter (LAYER_HEIGHT) to avoid visual overlap; the dynamic radius parameter (LEVEL_BOX_radius) intelligently adjusts the node distribution density to adapt to different data scales and significantly improves the readability of the graph; entities are distributed according to semantic levels (such as target layer, resource layer, etc.) and distinguished by HSV encoding color to form an intuitive spatial hierarchy perception, simplifying the understanding cost of complex knowledge networks.

[0058] 2. Enhanced Exploration Capabilities through Dynamic Interaction: Based on Three.js and OrbitControls, it enables 360° free rotation, scroll wheel zoom, and entity focus, supporting users to roam the map from multiple angles; the damped inertial control model makes rotation operations more physically intuitive and improves the smoothness of interaction; the GSAP animation engine drives smooth switching between 2D and 3D views (animation duration 500ms), and the 2D mode automatically locks the top-down view (y=25) to avoid view jumps and reduce operation complexity.

[0059] 3. Intelligent highlighting and optimized information display: Based on Raycaster collision detection, a correlation diffusion model is constructed, and multi-level grayscale processing is performed on non-associative nodes (first-level associations retain their original color, and second-level associations are made transparent according to topological distance). This not only preserves the overall structure of the map, but also highlights the association relationship with red lines to improve the recognition of key information. The intelligent label orientation mechanism (quaternion interpolation) ensures that the labels always face the user, and the display of cross-connections is optimized with Bézier curves to enhance the consistency of visualization.

[0060] 4. Data-driven and dynamic adaptation capabilities: Based on Vue3 reactive data binding, knowledge graph data and 3D models are synchronized in real time; the node density dynamic adjustment algorithm (ideal density threshold calculation + radius adaptive expansion) automatically handles node congestion problems and adapts to different data scales; the view reset mechanism saves the initial state parameters (camera position, entity coordinates, etc.) and supports one-click restoration of the initial view, improving the convenience of operation.

[0061] 5. Versatility and scalability of the technical architecture: It adopts a hybrid rendering architecture of Three.js + WebGL + CSS2DRenderer, which is compatible with high-performance rendering on the Web. The modular design supports the expansion of multi-level association visualization, custom entity type mapping and other functions, which are suitable for knowledge graph scenarios in multiple fields such as education and finance. Attached Figure Description

[0062] Figure 1 This is a schematic diagram of the process of a dynamic interactive display method for a knowledge graph based on a 3D hierarchical ring, as described in this invention.

[0063] Figure 2This is a block diagram illustrating the principle of a dynamic interactive display system for a 3D hierarchical ring-shaped knowledge graph, as described in this invention. Detailed Implementation

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

[0065] like Figure 1 As shown, the present invention provides a technical solution: a method for dynamic interactive display of a knowledge graph based on a 3D hierarchical ring, comprising the following steps:

[0066] S1. Divide the knowledge entities into N concentric ring layers (N≥3) according to semantic hierarchy. The entities in each layer are evenly distributed along the ring track. Vertical spatial isolation between layers is achieved by the height difference parameter LAYER_HEIGHT. The distribution density of nodes in each layer is dynamically controlled by the radius parameter LEVEL_BOX_radius.

[0067] S2. The Three.js framework is used in combination with WebGL and CSS2DRenderer for hybrid rendering, and Vue3 reactive data binding is used to realize real-time synchronization between knowledge graph data and 3D models.

[0068] S3. Responds to mouse interaction events and enables 360° free rotation, scroll wheel zoom and entity focus through OrbitControls. It works with the GSAP animation engine to achieve smooth switching between 2D and 3D views. The 2D view automatically locks the top-down view (y=25).

[0069] S4. Construct an association diffusion model based on Raycaster collision detection, perform intelligent grayscale processing (color value #F5F7FA) on non-associative nodes, and highlight associated nodes and red lines.

[0070] More specifically, the radius and height of each of the target layer, resource layer, knowledge layer, problem layer, and capability layer satisfy a dynamic calculation formula:

[0071] ;

[0072] in, The innermost base radius (unit: pixels). Base height difference (unit: pixels) The radius expansion factor, The levels are numbered sequentially: 1 corresponds to the target level, 2 to the resource level, 3 to the knowledge level, 4 to the problem level, and 5 to the capability level.

[0073] Radius calculation formula:

[0074] ;

[0075] Parameter description: The pixel is the basic radius of the innermost layer (target layer), which defines the minimum spatial reference of the map; k is the radius expansion coefficient. By dynamically adjusting this coefficient, the node density requirements of different levels can be adapted (e.g., for layers with a large number of nodes, k can be increased to expand the radius). These are hierarchical numbers, corresponding to different semantic layers: 1 (target layer), 2 (resource layer), 3 (knowledge layer), 4 (problem layer), 5 (capability layer), and so on. As it increases, the radius increases linearly.

[0076] Height calculation formula:

[0077] ;

[0078] Parameter description: The pixel is the smallest unit of vertical isolation between layers, based on the height difference. Consistent with the meaning in the radius formula, the height increases linearly with the layer number, ensuring that different layers form a clear vertical stratification in three-dimensional space (such as the target).

[0079] The floor height is Pixels, capability layer height is (pixels).

[0080] Layered isolation and spatial layout optimization: using height difference parameters This achieves physical isolation between layers along the Z-axis, avoiding node overlap issues common in traditional 2D layouts. For example, the knowledge layer... The height is The pixels, compared to the resource layer (20 pixels) and the problem layer (40 pixels), create a vertical spatial distinction, enhancing the visual perception of the hierarchical relationship. Radius parameter. As the layer increases, the outer layer has a larger ring circumference, which can accommodate more nodes. Combined with dynamic density adjustment algorithms (such as radius expansion triggered by excess nodes), node accumulation is avoided.

[0081] The adaptability of the dynamic adjustment mechanism: The radius expansion coefficient k ranges from 0.8 to 1.2, allowing for flexible adjustment of the radius of each layer based on the actual data volume. For example, when the number of nodes in a certain layer is large, increasing the value of k can make the radius expansion more significant (e.g., when k=1.2, the radius of the capability layer is...). This reduces node density and improves visualization clarity. The linear relationship between height and hierarchical number ensures consistency in hierarchical depth, enabling the graph to form a regular "ring-shaped staircase" structure in three-dimensional space, facilitating users' understanding of hierarchical relationships among knowledge levels.

[0082] Synergy with interactive features: Dynamic calculation of radius and height provides a spatial basis for mouse interactions (such as 360° rotation and focus) and view switching (2D / 3D). For example, during 2D view switching, the displacement interpolation of the entity along the Y-axis... and camera tilt angle adjustment A smooth transition needs to be achieved based on the height parameters of each layer. The correlation diffusion model (such as node grayscale and red line highlighting) depends on the spatial distribution of each layer, and determines the node position through radius and height to ensure the accuracy of collision detection (raycaster) and visual highlighting.

[0083] More specifically, the dynamic adjustment mechanism for node distribution density includes:

[0084] Calculate the ideal density threshold: ;

[0085] When the actual density exceeds the threshold, an adaptive radius expansion is triggered. ;

[0086] in, The pixel represents the minimum spacing between nodes. The number of excess nodes. For expansion factor, The radius of the current layer. This represents the number of nodes in the current layer.

[0087] Density threshold determination: Calculate the actual arc length spacing of a single node in the current layer. If the spacing is less than If the density exceeds the limit, it is determined that the expansion needs to be triggered.

[0088] Radius expansion calculation: Calculate the number of excess nodes For example, if the ideal number of nodes in the current layer is ,but (Round down).

[0089] Calculate the expansion amount using the formula. The updated layer radius is Recalculate the node distribution angle interval Ensure node spacing .

[0090] Dynamic layout update: Recalculate entity space coordinates based on the new radius This achieves uniform redistribution of nodes.

[0091] Adaptive layout capability: When the number of nodes in a layer suddenly increases (e.g., a knowledge layer contains a large number of knowledge points), the ring perimeter is automatically increased by expanding the radius to avoid node stacking. For example, if the original radius of a layer is r = 20 pixels and the number of nodes is N_{\text{layer}} = 15, then the ideal arc length spacing is... Pixels (≥8 pixels, no expansion required); if the number of nodes increases to 16, the arc length spacing decreases to approximately 7.85 pixels (<8 pixels), triggering expansion: (Take 1) Pixels, new radius r = 20.375 pixels, arc length spacing increased to Pixels (satisfying) ).

[0092] Combining the dynamic formulas of the radii of each layer The density adjustment mechanism further optimizes the three-dimensional space allocation, ensuring that the outer layer (such as the capability layer) can accommodate more nodes, while the inner layer (such as the target layer) maintains a compact layout.

[0093] Intelligent expansion avoids node overlap, and Bézier curves optimize the display of intersecting lines, improving the readability of the graph. The dynamic adjustment process is synchronized with view switching and interactive operations (such as rotation and focus) to ensure smooth and lag-free user operation.

[0094] More specifically, the 2D / 3D view switching includes a synchronized animation sequence:

[0095] Perform displacement interpolation on the solid along the Y-axis: ;

[0096] The camera performs pitch angle interpolation synchronously: ;

[0097] in: The decay coefficient controls the rate of displacement change (the exponential decay characteristic makes the animation change quickly at the beginning and gradually slow down later, which is in line with visual comfort). For animation duration, The initial pitch angle of the camera (any angle in the 3D view). In 2D mode, it is 25°. For the initialization of the entity Coordinates (vertical height of each layer in the 3D view, such as knowledge layer y=30 pixels). For the goal Coordinates (a uniform vertical position in a 2D view, such as y=25 pixels). It is a time variable.

[0098] Animation trigger condition: Clicking the "Multidimensional View" or "Planar View" button triggers the GSAP animation engine to execute the synchronization sequence. Simultaneously, the state of the currently selected entity (selectedSphereId) is cleared to prevent focus remnants.

[0099] Entity displacement implementation: Traverse all layers of entities, record the initial Y coordinate y_0, and calculate the target coordinate. 25 pixels (2D mode) or the original height of each layer (3D mode); each frame is calculated using an exponential function. ,For example hour, This achieves a slow initial displacement followed by a fast final displacement.

[0100] Camera angle adjustment: Initial pitch angle If it is any angle in the 3D view Then in Inner linear transition to ;Calculate per frame ,For example hour, This ensures a smooth descent of the viewing angle.

[0101] Synchronous rendering mechanism: Entity displacement and camera animation are controlled in parallel via the GSAP timeline, ensuring that both are completed synchronously within T=500ms. Each frame update triggers a WebGL renderer redraw, while the spatial positions of connections and labels are updated via raycaster to avoid visual tearing.

[0102] More specifically, the intelligent grayscale processing employs a multi-level associative highlighting algorithm:

[0103] First-level related nodes retain their original colors, while second-level related nodes apply transparency based on topological distance. ;

[0104] Unified grayscale processing for non-associated nodes: ;

[0105] in, is the transparency value, d is the topological distance, and R, G, and B are the three channel values ​​of the original color.

[0106] First-level related node processing: Nodes directly connected to the selected entity (topological distance d=1) retain their original colors without any transparency or grayscale processing. This ensures clear visibility of direct relationships; for example, when a node in the "target layer" is clicked, its directly associated "resource layer" nodes retain their original HSV-encoded colors (such as blue, green, etc.).

[0107] Transparency calculation for secondary related nodes:

[0108] ;

[0109] Parameter meaning: Node transparency (value range [0,1]). To be completely opaque, To be completely transparent; : Attenuation coefficient, controls the rate at which transparency changes with topological distance; d: Topological distance (e.g., d=2 means that there is a gap of 1 intermediate node between the selected node and the selected node).

[0110] Implementation example: When d=2, That is, the node transparency is approximately 36.8%, presenting a semi-transparent effect; when d=3, Transparency is further improved, and visual priority is reduced.

[0111] Grayscale processing of non-associated nodes:

[0112] ;

[0113] Based on the differences in human eye sensitivity to the three RGB channels (green > red > blue), a weighted average method is used to convert color to grayscale values. In the formula, 0.299, 0.587, and 0.114 are the brightness conversion coefficients recommended by the CIE (International Commission on Illumination), ensuring that the brightness of the grayscale nodes conforms to human visual perception. Non-associated nodes are uniformly converted to light gray (e.g., #F5F7FA) to contrast with the original color of associated nodes, preserving the overall outline of the graph while reducing visual interference from non-essential information.

[0114] Implementation process and interaction logic

[0115] Triggering conditions: When the mouse clicks or hovers over an entity, the selected node ID (selectedSphereId) is determined through raycaster collision detection; the knowledge graph relationships are traversed, and the topological distance d between all nodes and the selected node is calculated.

[0116] Hierarchical highlighting: Level 1 association (d=1): Node material color remains unchanged, connecting lines are highlighted in red (e.g., #FF0000), and line width is increased by 20%; Level 2 association (d=2): [Followed by...] Calculate transparency and apply it to node materials (e.g., a semi-transparent effect with 36.8% transparency); For non-associated elements (d≥3): convert RGB values ​​using a grayscale formula and set the node color accordingly.

[0117] (0.299R+0.587G+0.114B,0.299R+0.587G+0.114B,0.299R+0.587G+0.114B).

[0118] Dynamic update mechanism: When the selected node changes, the previous highlighted state is cleared and the association relationship of the newly selected node is recalculated; in conjunction with the GSAP animation engine, a 0.3-second fade-in and fade-out effect is added when the node grayscale and highlighted states change to avoid visual abrupt changes.

[0119] More specifically, the mouse interaction includes a damped inertial control model:

[0120] The integral relationship between rotational angular velocity and drag force: ;

[0121] The angular velocity decays exponentially after release: ;

[0122] in: Angular velocity (unit: ), The drag force (normalized value). This is the force conversion coefficient. The initial angular velocity, As the attenuation factor, It is a time variable.

[0123] Drag and drop phase (mouse pressed and moved):

[0124] Force calculation: Listen for mouse movement events, calculate the displacement per unit time, and normalize it to obtain the force. (e.g., 100 pixels per second corresponds to) .

[0125] Angular velocity update: through integral accumulation Calculate the current angular velocity in real time. For example, for a duration of 0.5 seconds... drag and drop, .

[0126] View rotation: The OrbitControls controller converts angular velocity into map rotation angle for real-time interaction.

[0127] Release phase (mouse released):

[0128] Initial angular velocity record: Saves the value at the moment of release. .

[0129] Attenuation calculation: based on Update the angular velocity frame by frame. For example, At that time, 1 second after release, The rotational speed dropped to 38.7% of its initial value.

[0130] Inertial rotation: continuously based on Update the rotation angle of the graph until the angular velocity approaches 0 (usually stopping after about 2 to 3 seconds).

[0131] Damping parameter optimization: Ergonomic testing determined that: smaller Avoid dragging too quickly, especially large ones. To ensure that inertial decay does not last too long, a balance is struck between interactive efficiency and realism.

[0132] More specifically, the dynamic interactive display method for knowledge graphs based on 3D hierarchical rings also includes a tag intelligent orientation mechanism:

[0133] Tag orientation is calculated using quaternion spherical linear interpolation (Slerp): ;

[0134] Real-time update of label normal direction to scene center point: ;

[0135] in, The orientation quaternion at time t (controlling the smooth transition of 3D rotation). This is the initial orientation (e.g., the initial tilt angle of the label). The target orientation (which always points to the center of the scene) is T, and the interpolation duration is T (e.g., 500ms, to ensure smooth orientation changes without jumps). It is the normal vector (which determines the orientation of the label). The coordinates of the center point of the scene (e.g., the origin of the three-dimensional space (0,0,0)). The coordinates of the label position;

[0136] The initialization phase includes a data-driven rendering process, with the following specific steps:

[0137] Parsing JSON knowledge graph data and mapping it to 3D entities:

[0138] ;

[0139] in, This represents the input knowledge graph JSON data. This represents the mapping rules from entity types to 3D models, expressed through functions. Map the knowledge graph information in JSON data to entities in a 3D scene;

[0140] Solid colors use HSV encoding:

[0141] ;

[0142] in, For entity type IDs (e.g., "Target Layer" ID=1, "Resource Layer" ID=2), the range of values ​​is... , Maximum number of entity types (e.g., 5 layers) ), hue Calculated based on the entity type ID, ensuring that each entity type has a unique color and saturation. Set to 0.8, brightness Set it to 0.9 to ensure the visibility of entities in the scene.

[0143] Color generation logic: Hue Linear allocation by type ID, such as , This ensures that different types of entities have unique colors. A fixed saturation of 0.8 and a brightness of 0.9 are used to guarantee color vividness while avoiding excessive brightness that could cause visual fatigue.

[0144] Regardless of how the knowledge graph rotates, the labels always face the user. For example, during a 360° pan, users can read entity labels without manually adjusting their viewpoint, improving information retrieval efficiency. Quaternion interpolation and normal updates are performed synchronously, working in conjunction with animation sequences during 2D / 3D view transitions (such as Y-axis displacement interpolation) to ensure continuous label orientation during view transformations. Real-time updates of backend JSON data are supported; for example, when a new entity is added, it is remapped and rendered via function f without restarting the scene. HSV color coding creates visual hierarchies for different entity types, such as target layer (red), resource layer (yellow), and knowledge layer (green), allowing users to quickly distinguish semantic categories.

[0145] More specifically, the dynamic interactive display method for knowledge graphs based on 3D hierarchical rings also includes a view reset mechanism, which is implemented as follows:

[0146] Save initial state parameters:

[0147] ;

[0148] in, This represents the scene state after initialization, including the initial camera position coordinates. The initial set of positions of all entities The initial position set of all labels and the initial positions and parameter sets of all ring layers. .

[0149] Restores the initial state when a reset is triggered:

[0150] ;

[0151] When the view reset mechanism is activated, the current scene state variables will be... Set to initial state This restores the scene to its initial state, ensuring that users can reset the scene to its initial state at any time.

[0152] After the 3D scene initialization is complete (as in steps 1.1 to 1.4), all current state parameters are immediately saved. Using JavaScript object deep copy technology, the parameters of the camera, entities, labels, and ring layer are solidified into immutable data structures to prevent modification during subsequent interactions.

[0153] Triggering conditions: The user clicks the "Reset" button on the interface; the system automatically triggers this when it detects abnormal operation (such as the camera's field of view exceeding the preset range). Recovery logic:

[0154] ;

[0155] Implementation steps:

[0156] Camera reset: Sets the camera position, orientation, and focal length. For example, restore the default top view of 25° (2D view) or the initial 3D viewpoint.

[0157] Entity and Label Reset: Traverse all entities and labels, and sort them by... and Reset the spatial coordinates to ensure a return to the initial circular distribution.

[0158] Ring layer parameter recovery: Press Reset parameters such as radius and height difference of each layer, and trigger the dynamic density adjustment mechanism to recalculate the node distribution (if necessary).

[0159] When a user drags the graph excessively or accidentally clicks a highlighted node, causing the view to become cluttered, clicking "Reset" instantly restores the initial layout. For example, in an educational knowledge graph, after exploring complex knowledge point relationships, students can quickly return to the initial hierarchical view and replan their exploration path.

[0160] It supports users to quickly switch between different exploration tasks. For example, when comparing different knowledge modules, each reset provides a unified initial perspective, avoiding the impact of residual state from the previous operation on subsequent analysis.

[0161] Instead of reloading data or recalculating the layout, the pre-stored state parameters are directly reused for memory-level assignment. The recovery process takes less than 50ms, which is much faster than the scene reconstruction of traditional solutions (which takes about 500ms).

[0162] More specifically, the steps to initialize a 3D scene include:

[0163] Step 1.1: Create a Three.js scene object, initialize camera parameters, set initial position and orientation, and set the default focal length to 500; Step 1.2: Instantiate CSS2DRenderer and WebGL renderer, configure background color to #F8F9FA, and exposure to 1.2; Step 1.3: Add mouse click event listener, detect the clicked entity through raycaster, and trigger focus highlight logic; Step 1.4: Initialize the OrbitControls controller, set the scroll wheel zoom sensitivity to 0.5, and the inertial rotation smoothness to 0.8.

[0164] More specifically, the steps for dynamically controlling the node distribution density at each layer include:

[0165] Step 2.1: Clear the data from the previous scenario, parse the backend JSON knowledge graph, and extract entity types, relationships, and attribute values; Step 2.2: Assign entities to the corresponding levels according to their types, using the formula... Calculate the layer radius;

[0166] Step 2.3: Perform a ring-shaped uniform distribution calculation for each layer of solids: Step 2.3.1: Calculate the layer perimeter. By number of entities Allocation angle interval Step 2.3.2: According to (x,y,z)= Calculate the spatial coordinates of the entity. For entity serial number, ;

[0167] Step 2.4: Create connections between entities, use Bézier curves to optimize the cross display, and dynamically adjust the connection width according to the connection strength.

[0168] like Figure 2 As shown, a dynamic interactive display system for a knowledge graph based on a 3D hierarchical ring includes a Thee.js rendering module, a dynamic layout module, an interactive control module, an association highlighting module, and a data response module.

[0169] Thee.js rendering module generates layered ring-shaped 3D scenes and performs mixed rendering of WebGL and CSS2D; the dynamic layout module is configured to perform layer radius calculation, ring-shaped node distribution, and adaptive density adjustment; the interactive control module includes OrbitControls controllers, damped inertia algorithms, and mouse event listeners; the associated highlighting module integrates raycaster collision detection, multi-level grayscale processing, and associated connection highlighting; and the data response module implements two-way binding and real-time update synchronization of JSON data and 3D entities.

[0170] The dynamic layout module includes: a hierarchy radius calculation unit and a node distribution density adjustment unit;

[0171] Hierarchical radius calculation unit execution formula ;

[0172] Node distribution density adjustment unit based on Implement load balancing calculations and radius expansion.

[0173] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention, the scope of which is defined by the appended claims and their equivalents.

Claims

1. A knowledge graph dynamic interaction display method based on 3D layered ring, characterized in that, The method comprises the following steps: S1, the knowledge entity is divided into N concentric ring layers according to the semantic hierarchy, N>=3, the entities in each layer are uniformly distributed along the ring track, the vertical space isolation between layers is realized through the height difference parameter LAYER_HEIGHT, and the node distribution density of each layer is dynamically controlled through the radius parameter LEVEL_BOX_radius; S2, Three.js framework is adopted to combine WebGL and CSS2DRenderer mixed rendering, and real-time synchronization of knowledge graph data and 3D model is realized based on Vue3 responsive data binding; S3, in response to the mouse interaction event, 360° free rotation, zooming and entity focusing are realized through OrbitControls, smooth switching of 2D / 3D view is realized by cooperating with GSAP animation engine, the 2D view is automatically locked at the top view angle, and y=25; S4, an association degree diffusion model is constructed based on raycaster collision detection, intelligent gray processing is performed on non-associated nodes, and associated nodes and red connecting lines are highlighted; The target layer, the resource layer, the knowledge layer, the problem layer and the ability layer, the radius and the height of each layer satisfy the dynamic calculation formula: ； wherein, is the innermost base radius, in pixels, is the base height difference, in pixels, is the radius expansion coefficient, is the level number, 1 corresponds to the target layer, 2 corresponds to the resource layer, 3 corresponds to the knowledge layer, 4 corresponds to the problem layer, and 5 corresponds to the ability layer; The node distribution density dynamic adjustment mechanism comprises: Computing the ideal density threshold: ; When the actual density exceeds the threshold, the radius of adaptation is triggered to expand: ; wherein, pixel is the node minimum distance, is the excess node count, is the expansion factor, is the current layer radius, is the current layer node count. 2.The method of claim 1, wherein, The 2D / 3D view switching comprises a synchronous animation sequence: The entity performs displacement interpolation along the Y axis: ; Camera synchronization performs pitch interpolation: ; wherein: is the decay coefficient, is the animation duration, is the initial camera pitch angle, is 25° in 2D mode, is the initial entity coordinates, is the target coordinates, is the time variable. 3.The method of claim 2, wherein, The intelligent gray processing adopts a multi-level association highlighting algorithm: The primary associated nodes retain the original color, and the secondary associated nodes apply transparency according to the topological distance: ; Non-associated node uniform gray scale processing: ; wherein, is the transparency value, d is the topological distance, R, G, B are the three channel values of the original color.

4. The method according to claim 3, wherein, The mouse interaction comprises a damping inertia control model: Integral relationship between the rotational angular velocity and the drag force: ; Exponential decay of angular velocity after release: ; wherein: is the angular velocity, in rad / s, , is the drag force, is the force conversion factor, is the initial angular velocity, is the decay factor, is the time variable.

5. The method according to claim 4, wherein, The knowledge graph dynamic interactive display method based on 3D layered ring further comprises a label intelligent orientation mechanism: The label orientation is calculated using the quaternion spherical linear interpolation Slerp: ; Real-time updating the tag normal direction to the scene center point: ; wherein, is the orientation quaternion at time t, is the initial orientation, is the target orientation, T is the interpolation duration, is the normal vector, is the scene center point coordinate, is the tag position coordinate; The initialization stage comprises a data-driven rendering process, and the specific steps are as follows: Parse the JSON knowledge graph data and map it to the 3D entity: ； wherein, represents the input knowledge graph JSON data, represents the mapping rule of entity type to 3D model, through the function maps the knowledge graph information in the JSON data into entities in the 3D scene; The entity color adopts HSV coding: ； wherein, is the entity type ID, taking a value range , is the maximum number of entity types, hue is calculated according to the entity type ID, ensuring that each entity type has a unique color, saturation is set to 0.8, lightness is set to 0.9 to ensure the visibility of the entity in the scene. 6.The method of claim 5, wherein, The knowledge graph dynamic interactive display method based on 3D layered ring further comprises a view resetting mechanism, and the specific implementation is as follows: Save the initial state parameters: ； wherein, represents the scene state after initialization, including the initial position coordinates of the camera , the initial position set of all entities , the initial position set of all tags , and the initial position and parameter set of all annular layers ; Trigger the reset to restore the initial state: ； When the view reset mechanism is invoked, the current scene state variables are set to the initial state so that the scene is restored to the state it was in when the initialization was completed. This mechanism ensures that the user can reset the scene to the initial state at any time.

7. The method according to claim 6, wherein, The initialization of the 3D scene comprises the following steps: Step 1.1: create a Three.js scene object, initialize the camera parameters, set the initial position and orientation, and set the default focal length to 500; Step 1.2: instantiate CSS2DRenderer and WebGL renderer, configure the background color to #F8F9FA, and the exposure to 1.2; Step 1.3: add mouse click event listening, detect the clicked entity through raycaster, and trigger the focus highlighting logic; Step 1.4: initialize the OrbitControls controller, set the scroll wheel zoom sensitivity to 0.5, and the inertia rotation smoothness to 0.

8. 8.The method of claim 7, wherein, The step of dynamically controlling the node distribution density of each layer comprises: Step 2.1: clear the previous scene data, parse the background JSON knowledge graph, and extract entity types, association relationships and attribute values; Step 2.2: Assigning to corresponding hierarchy based on entity type, by formula Calculate layer radius; Step 2.3: perform ring uniform distribution calculation on each layer entity: Step 2.3.1: Calculate layer circumference , by entity number Assign angle interval ; Step 2.3.2: Set (x,y,z) = (0,0,0) Calculate entity space coordinates, For entity number, ; Step 2.4: create association connecting lines between entities, adopt Bezier curve optimization for cross display, and dynamically adjust the connecting line width according to the association strength.

Images