Visualization method and system for a class tree-like structure knowledge graph with a hierarchical relationship
By calculating the node levels and rendering clear hierarchical relationships and detailed information displays, the problem of unclear hierarchical relationships in the traditional knowledge graph is solved, and the user reading experience is improved.
Patent Information
- Application Number
- CN202310412891.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-04-17
- Publication Date
- 2025-07-18
- Estimated Expiration
- 2043-04-17
AI Technical Summary
Traditional knowledge graph visualization methods cannot provide clear hierarchical relationships between entities, resulting in inconvenience to users.
By computing the hierarchical relationship of nodes and using recursive calling algorithms, nodes and edges are rendered in combination with preset styles, providing a clear hierarchical relationship display and displaying detailed information when the mouse is clicked.
It realizes clear display of hierarchical relationships between entities, which is convenient for users to read, and displays entity detailed information through guide lines, saving user learning costs.
Smart Images

Figure CN116561336B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of knowledge graphs, and in particular, to a visualization method and system for a tree-like structure knowledge graph with a hierarchical relationship. Background Art
[0002] With the development of big data, data is becoming increasingly numerous. Due to the characteristics of large-scale, heterogeneous, diverse, and multi-structured data, it brings challenges to use. Therefore, data visualization and knowledge graph technologies are introduced. The significance of data visualization is to help people better analyze data, and the quality of information largely depends on its expression method. Analyze the meaning contained in the data composed of digital lists and visualize the analysis results. The essence of data visualization is visual dialogue. Data visualization perfectly combines technology and art, and clearly and effectively conveys and communicates information by means of graphical means. From the implementation perspective, it can generally be divided into the first step of understanding data information (how to analyze data), the second step of selecting a reasonable display method (how to visually present data), the third step of visually presenting information (how to enhance the readability of charts), and finally, verifying the design (how to verify the readability of the design).
[0003] A knowledge graph (KG) is a visualization technology that intuitively shows knowledge and their interrelationships. Entities are used as nodes in the graph, and the semantic relationships between entities are used as edges. The implementation of a knowledge graph generally can be divided into knowledge modeling, knowledge acquisition, knowledge fusion, knowledge storage, knowledge calculation, graph mining and graph calculation, and visualization technology. The uses of a knowledge graph include basic NLP tasks, user data enhancement, searching for knowledge and providing industry background knowledge, providing knowledge guidance, solving problems, etc.
[0004] Traditional knowledge graph visualization methods cannot provide clear hierarchical relationships between entities, are not easy for users to use, and have problems with inconvenient reading. Summary of the Invention
[0005] By providing a visualization method and system for a tree-like structure knowledge graph with a hierarchical relationship, the present invention solves the technical problem in the prior art that clear hierarchical relationships cannot be provided between entities, and achieves the technical effect of being able to provide clear hierarchical relationships between entities and facilitating user reading.
[0006] The present invention provides a visualization method for a tree-like structure knowledge graph with a hierarchical relationship, including:
[0007] Obtain node data and edge data to be visualized;
[0008] Through the formula Through recursive calls, calculate the levels Level of all nodes on the same tree as the root node; where find() is the method for calculating the node level, x is the obtained node data, n is the level of the current node, x.next is the next node of node x, x.rel is the attribute of the edge data between node x and the next node, x.next = None means that node x has no next node, and S is a set containing the relationships between all nodes that need to be graded;
[0009] Through the formula Calculate the display coordinate positions (X, Y) of the nodes to be visualized on the page; where WIDTH is the canvas width, X step is the horizontal distance between nodes, i is the node index, Count is the number of nodes in the current level, Y root is the ordinate of the root node, Level is the level of the node, Y step is the distance between levels;
[0010] Obtain the position of the edge to be visualized based on the display coordinate positions of the start and end points of the edge to be visualized;
[0011] Render the level, display coordinate position of the node to be visualized, and the position of the edge to be visualized on the page according to the preset default style to obtain a visualized tree-like knowledge graph.
[0012] Specifically, the calculation of the levels of all nodes on the same tree as the root node through recursive calls includes:
[0013] Starting from the root node, recursively traverse all nodes. If the relationship between the current node and the next node in a certain recursive call belongs to the set S, enter the next level of recursion; if the relationship between the current node and the next node in a certain recursive call does not belong to the set S or node x has no next node, exit the recursion, and the level of the current node is n.
[0014] Specifically, the rendering to the page according to the preset default style to obtain a visualized tree-like knowledge graph includes:
[0015] Based on the preset default style, if the levels of the start node and the end node of the edge to be visualized are the same, render the position where the edge to be visualized is displayed on the page as the first style; if the levels of the start node and the end node of the edge to be visualized are different, render the position where the edge to be visualized is displayed on the page as the second style to obtain the visualized tree-like knowledge graph; the first style and the second style are different.
[0016] Specifically, it also includes:
[0017] Obtain the detailed data of the nodes to be visualized;
[0018] Take the position of the selected node as the starting point of the guiding line, take the position of the preset knowledge bar as the end point of the guiding line, bind the detailed data of the node to be visualized in the knowledge bar, initialize the guiding line according to the preset style, and render the knowledge bar according to the preset position and style.
[0019] Specifically, the rendering of the knowledge bar according to the preset position and style includes:
[0020] Receive the mouse click node instruction;
[0021] Render and generate a knowledge bar associated with the clicked node according to the preset position and style;
[0022] Call the preset style to generate the guiding line to connect from the position of the clicked node to the position of the rendered knowledge bar.
[0023] The present invention also provides a knowledge graph visualization system with a hierarchical relationship class tree structure, including:
[0024] The first data acquisition module is used to acquire node data and edge data to be visualized;
[0025] The hierarchy acquisition module is used to calculate the level Level of all nodes on the same tree as the root node through the formula Through recursive call, where find() is the method for calculating the node level, x is the acquired node data, n is the current node level, x.next is the next node of node x, x.rel is the attribute of the edge data between node x and the next node, x.next = None means that node x has no next node, and S is a set containing the relationships between all nodes that need to be classified;
[0026] The node position acquisition module is used to calculate the display coordinate position (X, Y) of the node to be visualized on the page through the formula where WIDTH is the canvas width, X step is the horizontal distance between nodes, i is the node index, Count is the number of nodes in the current level, Y root is the vertical coordinate of the root node, Level is the level of the node, Y step is the distance between levels;
[0027] The edge position acquisition module is used to obtain the position of the edge to be visualized according to the display coordinate positions of the starting point and the ending point of the edge to be visualized;
[0028] The knowledge graph construction module is used to render the hierarchy, display coordinate positions of the nodes to be visualized on the page, and the positions of the edges to be visualized onto the page according to a preset default style, so as to obtain a visualized tree-like knowledge graph.
[0029] Specifically, the hierarchy acquisition module is specifically used to start from the root node and recursively traverse all nodes. If the relationship between the current node and the next node in a certain recursive call belongs to the set S, then enter the next level of recursion; if the relationship between the current node and the next node in a certain recursive call does not belong to the set S or the node x has no next node, then exit the recursion, and the level of the current node is n.
[0030] Specifically, the knowledge graph construction module is specifically used to render the hierarchy, display coordinate positions of the nodes to be visualized on the page, and the positions of the edges to be visualized onto the page according to a preset default style. If the levels of the start node and the end node of the edge to be visualized are the same, then render the position where the edge to be visualized is displayed on the page in the first style; if the levels of the start node and the end node of the edge to be visualized are different, then render the position where the edge to be visualized is displayed on the page in the second style, so as to obtain the visualized tree-like knowledge graph; the first style and the second style are different.
[0031] Specifically, it further includes:
[0032] The second data acquisition module is used to acquire the detailed data of the nodes to be visualized;
[0033] The knowledge bar construction module is used to take the position where the selected node is located as the starting point of the guiding line, take the position of the preset knowledge bar as the ending point of the guiding line, bind the detailed data of the nodes to be visualized in the knowledge bar, initialize the guiding line according to the preset style, and render the knowledge bar according to the preset position and style.
[0034] Specifically, the knowledge bar construction module includes:
[0035] The guiding line initialization unit is used to take the position where the selected node is located as the starting point of the guiding line, take the position of the preset knowledge bar as the ending point of the guiding line, bind the detailed data of the nodes to be visualized in the knowledge bar, and initialize the guiding line according to the preset style;
[0036] The click instruction monitoring unit is used to receive the mouse click node instruction;
[0037] The knowledge bar rendering unit is used to render and generate a knowledge bar associated with the clicked node according to the preset position and style;
[0038] A guiding line generation unit for calling the preset style to generate a guiding line connecting from the position of the clicked node to the position of the knowledge bar generated by rendering.
[0039] One or more technical solutions provided in the present invention have at least the following technical effects or advantages:
[0040] First, obtain node data and edge data to be visualized, then through recursive calls, calculate the levels of all nodes on the same tree as the root node, then calculate the display coordinate positions of the nodes to be visualized in the page through formulas, and obtain the positions of the edges to be visualized based on the display coordinate positions of the start and end points of the edges to be visualized. Finally, render the levels, display coordinate positions of the nodes to be visualized, and the positions of the edges to be visualized in the page according to the preset default style to obtain a visualized class tree-shaped knowledge graph, solving the technical problem in the prior art that a clear hierarchical relationship cannot be provided between entities, and achieving the technical effect of being able to provide a clear hierarchical relationship between entities for easy reading by users. Description of the Drawings
[0041] Figure 1 It is a flowchart of a method for visualizing a class tree-shaped structure knowledge graph with a hierarchical relationship provided by an embodiment of the present invention;
[0042] Figure 2 It is a flowchart of an operation for changing the style of a class tree-shaped knowledge graph in an embodiment of the present invention;
[0043] Figure 3 It is a flowchart of visualizing detailed information of nodes in a class tree-shaped knowledge graph in an embodiment of the present invention;
[0044] Figure 4 It is a schematic diagram of the simulation result of a method for visualizing a class tree-shaped structure knowledge graph with a hierarchical relationship provided by an embodiment of the present invention;
[0045] Figure 5 It is a schematic diagram of the simulation result of querying detailed information of nodes in a method for visualizing a class tree-shaped structure knowledge graph with a hierarchical relationship provided by an embodiment of the present invention;
[0046] Figure 6 It is a module diagram of a system for visualizing a class tree-shaped structure knowledge graph with a hierarchical relationship provided by an embodiment of the present invention. Detailed Description of the Invention
[0047] Embodiments of the present invention provide a method and system for visualizing a class tree-shaped structure knowledge graph with a hierarchical relationship, solving the technical problem in the prior art that a clear hierarchical relationship cannot be provided between entities, and achieving the technical effect of being able to provide a clear hierarchical relationship between entities for easy reading by users.
[0048] The technical solutions in the embodiments of the present invention for solving the above technical problems are generally as follows:
[0049] Based on a preset hierarchical calculation algorithm, the embodiments of the present invention calculate the hierarchical information of the nodes to be rendered (i.e., the entities in the knowledge graph). After grading the nodes to be rendered, according to the hierarchical information of the nodes and the obtained edge information (i.e., the relationships between the nodes in the knowledge graph), the style information of the edges to be rendered is set according to the preset edge styles. If the start point and the end point of the edge to be rendered are at the same level, the style of the edge to be rendered will be set to the first style (such as a curve); if the start point and the end point of the edge to be rendered are at different levels, the style of the edge to be rendered will be set to the second style (such as a straight line). Optionally, the user can customize the style information of the nodes to be rendered and the edges to be rendered, including the styles, sizes, colors, connection methods, etc. of the nodes and edges. More importantly, the distribution, size, distance between each level, and distance between each node of the tree can be customized and controlled. On the basis of ensuring the tree structure of the graph, a great degree of freedom is provided.
[0050] The embodiments of the present invention also add a knowledge bar function. The embodiments of the present invention hope to provide a more clearly hierarchical visualization method for the subject knowledge graph. However, the entities in the subject knowledge graph are often specific concepts in the subject field, which is not conducive to non-experts in the field to understand the entity. In the embodiments of the present invention, when the user moves the mouse to the node corresponding to an entity in the knowledge graph, a guiding line will be rendered in the form of an animation to guide the user's attention to the knowledge bar, and detailed information such as the definition, attributes, and related references of the entity will be displayed in the knowledge bar. In this way, the relevant information of the entity is increased, the cost for the user to learn the background knowledge of the field is saved, and at the same time, the readability of the graph is not affected.
[0051] To better understand the above technical solutions, the above technical solutions will be described in detail below in conjunction with the accompanying drawings of the specification and specific implementation manners.
[0052] See Figure 1 , the method for visualizing a tree-like structure knowledge graph with hierarchical relationships provided by the embodiments of the present invention includes:
[0053] Step S110: Obtain the node data and edge data to be visualized; wherein, the node data represents the entities in the knowledge graph, and the edge data represents the relationships between the entities in the knowledge graph, that is, the relationships between the nodes.
[0054] Step S120: Through the formula Through recursive calls, calculate the levels Level of all nodes on the same tree as the root node; where find() is the method for calculating the node level, x is the obtained node data, n is the current node level, x.next is the next node of node x, that is, the end point of the edge data starting from node x in the to-be-visualized data obtained in the above steps, x.rel is the attribute of the edge data between node x and the next node, that is, the relationship between node x and the next node, x.next = None means that node x has no next node, and S is a set containing the relationships between all nodes that need to be classified; it can be adjusted according to the specific field where the present invention is implemented. Exemplarily, in the knowledge graph of university department and major settings, the elements in set S are: inclusion relationship and establishment relationship.
[0055] Specifically explain this step. By recursive calls, calculate the levels of all nodes on the same tree as the root node, including:
[0056] Starting from the root node, recursively traverse all nodes. If the relationship between the current node and the next node in a certain recursive call belongs to set S, enter the next level of recursion; if the relationship between the current node and the next node in a certain recursive call does not belong to set S or node x has no next node, exit the recursion, and the level of the current node is n.
[0057] Exemplarily, among the data to be visualized obtained, the node data includes: university, School of Computer Science, School of Physical Science and Technology, Information Management and Information System major, Data Science and Big Data Technology major, Applied Physics major, and Electronic Science and Technology major. For the sake of convenience in representation, the edge data is represented in the form of triples below, such as (A, B, REL), where A and B are two nodes, and REL represents the relationship between A and B. Among the above data to be visualized, the edge data includes: (university, School of Computer Science, contains), (university, School of Physical Science and Technology, contains), (School of Computer Science, Information Management and Information System, established), (School of Computer Science, Data Science and Big Data Technology, established), (School of Computer Science, Software Engineering, established), (School of Physical Science and Technology, Applied Physics major, established), (School of Physical Science and Technology, Electronic Science and Technology major, established), (Information Management and Information System, Data Science and Big Data Technology, same department major). The elements in the set S in this example are: "containment relationship" and "establishment relationship". Starting from the root node "university", the above hierarchical calculation algorithm is executed. The level of the root node is set to 0. The "School of Computer Science" and the "School of Physical Science and Technology" are in a "containment" relationship, and "containment" is in the set S, so enter the next-level recursion. The "School of Computer Science" and the "Information Management and Information System" are in an "establishment" relationship, and enter the next-level recursion until there is no next node, and then exit the recursion. Finally, it is calculated that the Level of the university is 0, the Level of the School of Computer Science and the School of Physical Science and Technology is 1, and the Level of the Information Management and Information System major, Data Science and Big Data Technology major, Applied Physics major, and Electronic Science and Technology major is 2.
[0058] Step S130: Through the formula calculate the display coordinate positions (X, Y) of the nodes to be visualized on the page; where WIDTH is the width of the canvas, X step is the horizontal distance between nodes, i is the node index. For example, for the first node, i = 1, Count is the number of nodes in the current level, Y root is the vertical coordinate of the root node, Level is the level of the node, Y step is the distance between levels;
[0059] Step S140: Obtain the positions of the edges to be visualized based on the display coordinate positions of the start and end points of the edges to be visualized;
[0060] Specifically, after calculating the display positions of the nodes to be visualized on the page, based on the preset LeaderLine.js library, obtain the positions of all the edges to be visualized on the page.
[0061] Further, after calculating the position information of all nodes to be visualized using the above algorithm, obtain the DOM (Document Object Model) of all nodes that have appeared in the edge data. Based on the above DOM, using the LeaderLine.js library, the position of the edge to be visualized in the page can be automatically calculated according to the DOM of the start and end points of the edge to be visualized.
[0062] Step S150: Render the level, display coordinate position of the node to be visualized in the page, and the position of the edge to be visualized into the page according to a preset default style, so as to obtain a visualized tree-like knowledge graph.
[0063] Specifically describe this step. Rendering into the page according to a preset default style to obtain a visualized tree-like knowledge graph includes:
[0064] Based on the preset default style, if the levels of the start node and the end node of the edge to be visualized are the same, then render the position where the edge to be visualized is displayed in the page as the first style; if the levels of the start node and the end node of the edge to be visualized are different, then render the position where the edge to be visualized is displayed in the page as the second style, so as to obtain a visualized tree-like knowledge graph; the first style and the second style are different.
[0065] In this embodiment, the node to be displayed and the edge to be displayed are both rendered based on SVG (Scalable Vector Graphics). Based on the preset default style, the position where the node to be displayed is displayed in the page is rendered as a rounded rectangle, and the rounded rectangle is a rect (rectangle) object in SVG. Based on the preset default style, if the levels of the start node and the end node of the edge to be visualized are the same, then render the position where the edge to be visualized is displayed in the page as a curve; if the levels of the start node and the end node of the edge to be visualized are different, then render the position where the edge to be visualized is displayed in the page as a straight line. Obtain a visualized tree-like knowledge graph.
[0066] Exemplarily, the nodes to be visualized corresponding to node data such as university, computer school, and school of physical science and technology are Figure 4 represented as rectangles in, and the edges to be visualized are represented as straight lines or curves in Figure 4 according to the hierarchical relationship between the nodes.
[0067] Next, combine Figure 2 to describe the style change operation of the tree-like knowledge graph in the embodiment of the present invention:
[0068] Step S205: Receive a style change operation instruction for the visualized tree-like knowledge graph.
[0069] After obtaining the visualized class tree knowledge graph, operations can be performed to change the style of the visualized class tree knowledge graph on the page. Specifically, operations for changing the style of font size, node filling color, node border curvature, edge color, edge thickness, horizontal distance between nodes, and vertical distance between nodes can be received.
[0070] Step S206: For the node data, edge data, and calculated hierarchical data in the data to be visualized, based on a preset position calculation algorithm, calculate the positions to be displayed on the page for the nodes to be visualized and the edges to be visualized.
[0071] In step S205 of the above embodiment, after receiving the operation for changing the style of the visualized class tree knowledge graph, the positions of the nodes to be visualized and the edges to be visualized may change. Therefore, it is necessary to recalculate the positions of the nodes to be visualized and the edges to be visualized on the page based on a preset position calculation algorithm.
[0072] Step S207: Render the nodes to be visualized and the edges to be visualized with the changed style within the page according to the target style.
[0073] Based on the style information received in step S205 above and the positions of the nodes to be visualized and the edges to be visualized calculated in step S206 above, render the nodes to be visualized at their positions on the page and render the edges to be visualized at their positions on the page, obtaining the visualized class tree knowledge graph.
[0074] To make it more convenient for users to view knowledge, a knowledge bar is also constructed, specifically including:
[0075] Obtain the detailed data of the nodes to be visualized;
[0076] Take the position of the selected node as the starting point of the guiding line, take the position of the preset knowledge bar as the ending point of the guiding line, bind the detailed data of the nodes to be visualized in the knowledge bar, initialize the guiding line according to the preset style, and render the knowledge bar according to the preset position and style.
[0077] Exemplarily, if the data to be visualized is all departments included in a university, all majors of the departments, all classes corresponding to a certain major, etc., then information such as the school, department, and major is represented as node data, and the relationships between colleges, between departments and majors, and between majors and classes can be represented by edge data. The specific explanations of a certain college and a certain major can be represented by detailed information data.
[0078] Specifically, rendering the knowledge bar according to the preset position and style includes:
[0079] Receive the mouse click node instruction;
[0080] Render and generate a knowledge bar associated with the clicked node according to a preset position and style;
[0081] Call a preset style to generate a guiding line that connects from the position of the clicked node to the position of the rendered and generated knowledge bar.
[0082] The following combines Figure 3 Introduce the visualization process of the detailed information of the class tree-shaped knowledge graph nodes in the embodiments of the present invention:
[0083] Step S305: Receive a detailed information query operation instruction for a node in the visualized class tree-shaped knowledge graph. Specifically, when the user moves the mouse to a certain node in the knowledge graph, a detailed information query operation instruction for the node in the visualized class tree-shaped knowledge graph is triggered.
[0084] After obtaining the visualized class tree-shaped knowledge graph, the detailed information of a certain node in the visualized class tree-shaped knowledge graph can be queried. In this embodiment, the detailed information query operation instruction for the node in the visualized class tree-shaped knowledge graph is obtained through the mouse event of JavaScript. When the mouse focus is moved to the rect object corresponding to a certain node in the knowledge graph, a detailed information query operation instruction for the node is triggered, and the DOM of the node is returned at the same time.
[0085] Step S306: Initialize the guiding line based on LeaderLine.js and render the knowledge bar according to a preset position and style.
[0086] After receiving the detailed information query operation instruction for the node in the visualized class tree-shaped knowledge graph, obtain the DOM returned in this step as the starting point of the guiding line, and the preset position of the knowledge bar as the end point of the guiding line. Pass the above starting point and end point into the guiding line construction method of LeaderLine.js to initialize the guiding line according to the default style. The default style of the guiding line is a Bezier curve.
[0087] Step S307: Render the guiding line according to a preset animation style, guide the user's attention to the knowledge bar, and render the detailed data to be visualized according to a preset style and position information.
[0088] After initializing the guiding line in the above step S306, the guiding line will be rendered according to a preset animation style, guiding the user's attention to the knowledge bar, and rendering the generated detailed data to be visualized according to a preset style and position information. The above generated detailed data to be visualized will be rendered in the knowledge bar according to a preset style, and the user will see detailed information such as the definition, attributes, or related references of the entity displayed in the knowledge bar. The animation is an SVG animation, dynamically extending from the starting point to the end point.
[0089] Exemplarily, Figure 5The page display situation after the details query of the node "Electronic Science and Technology Major" in the visualized tree-like knowledge graph is given. The guiding line points from the node to the knowledge column, and the detailed information to be visualized corresponding to the node will be rendered in the knowledge column.
[0090] Step S308: After the user moves the mouse out of a certain node in the knowledge graph, receive an instruction to cancel the details query operation for the node in the visualized tree-like knowledge graph.
[0091] After rendering the guiding line and the detailed information of the node in the knowledge column in the above step S307, start to receive an instruction to cancel the details query operation for the node in the visualized tree-like knowledge graph. In this embodiment, the details query operation instruction for the node in the visualized tree-like knowledge graph is obtained through the mouse event of JavaScript. When the mouse focus is moved out of the rect object corresponding to a certain node in the knowledge graph, an instruction to cancel the details query operation for the node is triggered.
[0092] Step S309: Retract the guiding line according to the preset animation style, and guide the user's attention back to the tree-like knowledge graph.
[0093] After receiving the instruction to cancel the details query operation for the node in the visualized tree-like knowledge graph in the above step S308, retract the guiding line according to the preset animation style. The preset animation style is the reverse movement of the animation for rendering the guiding line in step S307.
[0094] In order to make the obtained data easier to process, so as to better present its internal structure and relationships, after obtaining the node data, edge data, and detailed information data, it further includes:
[0095] Format the obtained node data, edge data, and detailed information data into the JSON (JavaScript Object Notation) format, and generate the nodes to be visualized, edges to be visualized, and detailed data to be visualized with the formatted data.
[0096] The following combines Figure 4 and Figure 5 to introduce the simulation results of the embodiments of the present invention in detail:
[0097] The embodiments of the present invention aim to overcome the disadvantages that the traditional knowledge graph visualization method cannot clearly reflect the hierarchical relationship between entities and is not easy to read. By constructing a tree-like knowledge graph visualization method, while retaining the structured semantic knowledge of the knowledge graph, the relationship between entities is made more intuitive. Exemplarily, the following takes the knowledge graph of the major settings in university departments as an example to introduce the simulation results of the embodiments of the present invention:
[0098] Figure 4 Schematic diagram of the simulation result of the visualization method of the class tree structure knowledge graph with hierarchical relationship provided by the embodiment of the present invention. First, obtain the data to be visualized, and generate the nodes to be visualized, the edges to be visualized, and the detailed data to be visualized after formatting; then, for the node data in the data to be visualized, calculate the hierarchical data of the nodes based on a preset hierarchical calculation algorithm; then, for the node data, edge data, and the calculated hierarchical data in the data to be visualized, calculate the positions to be displayed of the nodes to be visualized and the edges to be visualized on the page based on a preset position calculation algorithm; finally, based on the display positions of each node to be displayed on the page, the hierarchical data, and the positions to be displayed of each edge to be displayed on the page, render the nodes to be displayed and the edges to be displayed on the page according to a preset default style to obtain as shown in Figure 4 the visualized class tree knowledge graph. Compared with the traditional knowledge graph visualization method, the simulation result of the embodiment of the present invention provides a clear hierarchical relationship between entities through the class tree structure, which is convenient for users to read and understand.
[0099] Figure 5 Schematic diagram of the simulation result of querying node detailed information in the visualization method of the class tree structure knowledge graph with hierarchical relationship provided by the embodiment of the present invention. After obtaining the visualized class tree knowledge graph as shown in Figure 4 if a detail query operation instruction for a node in the visualized class tree knowledge graph is received through step S305, initialize a guiding line based on LeaderLine.js through step S306, render a guiding line in accordance with a preset animation style through step S307 to transfer the user's attention to the knowledge bar, and render the generated detailed data to be visualized in the knowledge bar to obtain as shown in Figure 5 the detail query result. In this way, the relevant information amount of the entity is increased, the cost for users to learn the subject background knowledge is saved, and at the same time, the readability of the graph is not affected.
[0100] See Figure 6 , the visualization system of the class tree structure knowledge graph with hierarchical relationship provided by the embodiment of the present invention includes:
[0101] The first data acquisition module 100 is used to acquire the node data and edge data to be visualized; among them, the node data represents the entities in the knowledge graph, and the edge data represents the relationship between entities in the knowledge graph, that is, the relationship between nodes and nodes.
[0102] The hierarchy acquisition module 200 is used to calculate through the formula Through recursive calls, calculate the level Level of all nodes on the same tree as the root node; where find() is the method for calculating the node level, x is the obtained node data, n is the current node level, x.next is the next node of node x, that is, the end point of the edge data starting from node x in the to-be-visualized data obtained in the above steps, x.rel is the attribute of the edge data between node x and the next node, that is, the relationship between node x and the next node, x.next = None means that node x has no next node, and S is a set containing the relationships between all nodes that need to be classified; it can be adjusted according to the specific field where the present invention is implemented.
[0103] Specifically, the level obtaining module 200 is specifically used to start from the root node and recursively traverse all nodes. If the relationship between the current node and the next node in a certain recursive call belongs to the set S, enter the next level of recursion; if the relationship between the current node and the next node in a certain recursive call does not belong to the set S or node x has no next node, exit the recursion, and the level of the current node is n.
[0104] The node position obtaining module 300 is used to calculate the display coordinate position (X, Y) of the to-be-visualized node on the page through the formula where WIDTH is the canvas width, X step is the horizontal distance between nodes, i is the node index, for example, for the first node, i = 1, Count is the number of nodes in the current level, Y root is the vertical coordinate of the root node, Level is the level of the node, Y step is the distance between levels;
[0105] The edge position obtaining module 400 is used to obtain the position of the to-be-visualized edge according to the display coordinate positions of the start point and the end point of the to-be-visualized edge;
[0106] Specifically, after the edge position obtaining module 400 calculates the display positions of the to-be-visualized nodes on the page, based on the preset LeaderLine.js library, obtain the positions of all to-be-visualized edges on the page.
[0107] Furthermore, after using the above algorithm to calculate the position information of all to-be-visualized nodes, obtain the DOM (Document Object Model) of all nodes that have appeared in the edge data. Based on the above DOM, using the LeaderLine.js library, the position of the to-be-visualized edge on the page can be automatically calculated according to the DOM of the start point and the end point of the to-be-visualized edge.
[0108] The knowledge graph construction module 500 is used to render the hierarchy, display coordinate positions of the nodes to be visualized on the page, and the positions of the edges to be visualized onto the page according to a preset default style, so as to obtain a visualized tree-like knowledge graph.
[0109] Specifically, the knowledge graph construction module 500 is specifically used to, based on a preset default style, for the hierarchy, display coordinate positions of the nodes to be visualized on the page, and the positions of the edges to be visualized, if the starting node and the ending node of the edge to be visualized have the same hierarchy, then render the position where the edge to be visualized is displayed on the page as a first style; if the starting node and the ending node of the edge to be visualized have different hierarchies, then render the position where the edge to be visualized is displayed on the page as a second style, so as to obtain a visualized tree-like knowledge graph; the first style and the second style are different.
[0110] In this embodiment, the nodes to be displayed and the edges to be displayed are both rendered based on SVG (Scalable Vector Graphics). Based on a preset default style, the position where the node to be displayed is displayed on the page is rendered as a rounded rectangle, and this rounded rectangle is a rect (rectangle) object in SVG. Based on a preset default style, if the starting node and the ending node of the edge to be visualized have the same hierarchy, then render the position where the edge to be visualized is displayed on the page as a curve; if the starting node and the ending node of the edge to be visualized have different hierarchies, then render the position where the edge to be visualized is displayed on the page as a straight line. A visualized tree-like knowledge graph is obtained.
[0111] In order to make it more convenient for users to view knowledge, a knowledge bar is also constructed, which specifically includes:
[0112] The second data acquisition module is used to acquire the detailed data of the nodes to be visualized;
[0113] The knowledge bar construction module is used to use the position where the selected node is located as the starting point of the guiding line, use the preset position of the knowledge bar as the ending point of the guiding line, bind the detailed data of the nodes to be visualized in the knowledge bar, initialize the guiding line according to a preset style, and render the knowledge bar according to a preset position and style.
[0114] Specifically, the knowledge bar construction module includes:
[0115] The guiding line initialization unit is used to use the position where the selected node is located as the starting point of the guiding line, use the preset position of the knowledge bar as the ending point of the guiding line, bind the detailed data of the nodes to be visualized in the knowledge bar, and initialize the guiding line according to a preset style;
[0116] The click instruction monitoring unit is used to receive the mouse click node instruction;
[0117] A knowledge bar rendering unit, configured to render and generate a knowledge bar associated with the clicked node according to a preset position and style;
[0118] A guiding line generating unit, configured to call a preset style to generate the guiding line to connect from the position of the clicked node to the position of the rendered knowledge bar.
[0119] In order to make the obtained data easier to process, so as to better present its internal structure and relationships, it further includes:
[0120] A data formatting module, configured to format the obtained node data, edge data, and detailed information data into the JSON (JavaScript Object Notation) format, and generate nodes to be visualized, edges to be visualized, and detailed data to be visualized with the formatted data.
[0121] The embodiments of the present invention develop a tree-like knowledge graph visualization method and system. Compared with the traditional knowledge graph visualization method based on force-directed graphs, the embodiments of the present invention can more clearly reflect the hierarchical relationships between entities. For example, in the field of discrete mathematics, "proposition" and "simple proposition", "proposition" is the upper-level entity of "simple proposition", "simple proposition" is the lower-level entity of "proposition", and the "proposition" node will be rendered as the parent node of the "simple proposition" node. Another example is that in the field of college discipline settings, "School of Computer Science" is the upper-level entity of "Software Engineering Major", and "Software Engineering Major" is the lower-level entity of "School of Computer Science". The embodiments of the present invention not only retain the structured semantic knowledge, but also make the hierarchical relationships between entities more intuitive.
[0122] Those skilled in the art should understand that the embodiments of the present invention can be provided as a method, a system, or a computer program product. Therefore, the present invention can take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk memories, CD-ROMs, optical memories, etc.) containing computer-usable program codes.
[0123] The present invention is described with reference to the flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to the embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, and the combination of processes and / or blocks in the flowcharts and / or block diagrams can be implemented by computer program instructions. These computer program instructions can be provided to the processors of general-purpose computers, special-purpose computers, embedded processors, or other programmable data processing devices to generate a machine, so that the instructions executed by the processors of the computer or other programmable data processing devices generate for implementing in the processFigure 1 one or more processes and / or blocks Figure 1 a device for the functions specified in one or more blocks
[0124] These computer program instructions can also be stored in a computer-readable memory capable of guiding a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a manufactured article including an instruction device, and the instruction device implements the processes Figure 1 one or more processes and / or blocks Figure 1 the functions specified in one or more blocks
[0125] These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process. Therefore, the instructions executed on the computer or other programmable device provide steps for implementing the functions specified in the processes Figure 1 one or more processes and / or blocks Figure 1 the functions specified in one or more blocks
[0126] Details not described in the embodiments of the present invention are all well-known technologies to those skilled in the art. Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention and not to limit them. Although the present invention has been described in detail with reference to the preferred embodiments, those of ordinary skill in the art should understand that the technical solutions of the present invention can be modified or equivalently replaced without departing from the spirit and scope of the technical solutions of the present invention, and they should all be covered by the scope of the claims of the present invention.
Claims
1. A visualization method for a class tree-structured knowledge graph with a hierarchical relationship, characterized in that, Including: Obtain node data and edge data to be visualized; Through the formula Through recursive calls, calculate the levels Level of all nodes on the same tree as the root node; where find() is the method for calculating the node level, x is the obtained node data, and n is the level of the current node, is the next node of node x, is the attribute of the edge data between node x and the next node, means that node x has no next node, is a set that contains the relationships between all nodes that need to be graded; Calculate the display coordinate position (X, Y) of the node to be visualized on the page through the formula; where, The width of the canvas is, The horizontal distance between nodes, i is the node index, and Count is the number of nodes in the current level. is the vertical coordinate of the root node, is the level of the node, is the distance between levels; Obtain the position of the edge to be visualized according to the display coordinate positions of the start point and the end point of the edge to be visualized; Render the level, display coordinate position of the node to be visualized in the page and the position of the edge to be visualized onto the page according to a preset default style, to obtain a visualized tree-like knowledge graph; The rendering onto the page according to the preset default style to obtain a visualized tree-like knowledge graph includes: Based on the preset default style, if the levels of the start node and the end node of the edge to be visualized are the same, render the position where the edge to be visualized is displayed in the page as a first style; if the levels of the start node and the end node of the edge to be visualized are different, render the position where the edge to be visualized is displayed in the page as a second style, to obtain the visualized tree-like knowledge graph; the first style and the second style are different.
2. The visualization method of the class tree structure knowledge graph with a hierarchical relationship as described in claim 1, wherein The calculating, through recursive call, the levels of all nodes on the same tree as the root node includes: Starting from the root node, recursively traverse all nodes. If the relationship between the current node and the next node in a certain recursive call belongs to the set , then enter the next level of recursion; if the relationship between the current node and the next node in a certain recursive call does not belong to the set or node x has no next node, then exit the recursion, and the level of the current node is .
3. The visualization method of the class tree structure knowledge graph with a hierarchical relationship according to claim 1, characterized in that, Also including: Obtain the detailed data of the node to be visualized; Take the position of the selected node as the start point of the guiding line, take the position of a preset knowledge bar as the end point of the guiding line, bind the detailed data of the node to be visualized in the knowledge bar, initialize the guiding line according to a preset style, and render the knowledge bar according to a preset position and style.
4. The visualization method of the class tree structure knowledge graph with a hierarchical relationship as claimed in claim 3, wherein The rendering the knowledge bar according to a preset position and style includes: Receive a mouse click node instruction; Render and generate a knowledge bar associated with the clicked node according to the preset position and style; Call the preset style to generate the guiding line to connect from the position of the clicked node to the position of the rendered and generated knowledge bar.
5. A class tree structure knowledge graph visualization system with a hierarchical relationship, characterized in that, Including: A first data acquisition module, used to obtain node data and edge data to be visualized; Hierarchical acquisition module, used to calculate, through a formula Through recursive calls, calculate the levels Level of all nodes on the same tree as the root node; where find() is the method for calculating the node level, x is the obtained node data, n is the level of the current node, is the next node of node x, is the attribute of the edge data between node x and the next node, means that node x has no next node, is a set containing the relationships between all nodes that need to be graded; A node position acquisition module, which is used to calculate the display coordinate position (X, Y) of the node to be visualized on the page through the formula ; where is the width of the canvas, is the horizontal distance between nodes, i is the node index, Count is the number of nodes in the current level, is the vertical coordinate of the root node, is the level of the node, is the distance between levels. An edge position acquisition module, used to obtain the position of the edge to be visualized according to the display coordinate positions of the start point and the end point of the edge to be visualized; A knowledge graph construction module, used to render the level, display coordinate position of the node to be visualized in the page and the position of the edge to be visualized onto the page according to a preset default style, to obtain a visualized tree-like knowledge graph; The knowledge graph construction module is specifically used to render the level, display coordinate position of the node to be visualized in the page and the position of the edge to be visualized onto the page according to a preset default style. If the levels of the start node and the end node of the edge to be visualized are the same, render the position where the edge to be visualized is displayed in the page as a first style; if the levels of the start node and the end node of the edge to be visualized are different, render the position where the edge to be visualized is displayed in the page as a second style, to obtain the visualized tree-like knowledge graph; the first style and the second style are different.
6. The class tree structure knowledge graph visualization system with a hierarchical relationship as described in claim 5, wherein The hierarchical acquisition module is specifically configured to start from the root node and recursively traverse all nodes. If the relationship between the current node and the next node in a certain recursive call belongs to the set , then enter the next level of recursion; if the relationship between the current node and the next node in a certain recursive call does not belong to the set or the node x has no next node, then exit the recursion, and the level of the current node is .
7. The hierarchical tree-like structure knowledge graph visualization system according to claim 5, characterized in that Also including: A second data acquisition module, used to obtain the detailed data of the node to be visualized; A knowledge bar construction module, which is used to take the position where the selected node is located as the starting point of the guiding line, take the position of the preset knowledge bar as the end point of the guiding line, bind the detailed data of the node to be visualized in the knowledge bar, initialize the guiding line according to the preset style, and render the knowledge bar according to the preset position and style.
8. The class tree structure knowledge graph visualization system with a hierarchical relationship as claimed in claim 5, wherein The knowledge bar construction module includes: A guiding line initialization unit, which is used to take the position where the selected node is located as the starting point of the guiding line, take the position of the preset knowledge bar as the end point of the guiding line, bind the detailed data of the node to be visualized in the knowledge bar, and initialize the guiding line according to the preset style; A click instruction monitoring unit, which is used to receive a mouse click node instruction; A knowledge bar rendering unit, which is used to render and generate a knowledge bar associated with the clicked node according to the preset position and style; A guiding line generation unit, which is used to call the preset style to generate the guiding line to connect from the position of the clicked node to the position of the rendered knowledge bar.
Citation Information
Patent Citations
Big data knowledge graph visualization method and device
CN111309897A
Knowledge graph visualization analysis method
CN112507036A