Method for visualizing a knowledge graph

Abstract

The application discloses a kind of visual display method of knowledge graph, through using Canvas+WEBGL, calling GPU acceleration optimizes rendering performance problem under large data volume of browser end, reduces the phenomenon of page lag, solves the demand of data one screen presentation through boundary calculation method, realizes the accurate configuration of canvas element through rich configuration item parameter SetOption, solves the limitation that tool presentation theme is not flexible enough, exposes interactive event output canvas element data sufficiently, solves the problem of insufficient tool extensibility.

Description

TECHNICAL FIELD

[0001] The present application relates to a knowledge graph visualization display method, belonging to the technical field of graph visualization. BACKGROUND

[0002] A knowledge graph (KG) is a visual display of knowledge and their mutual relationships by means of visualization technology, in which entities are nodes in the graph and semantic relationships between entities are edges of the graph. The knowledge graph breaks the data isolation, facilitates machine learning data and knowledge reasoning, and thus discovers deep knowledge and relationships, providing support for wisdom search and intelligent question answering, recommendation, and intelligent decision-making.

[0003] A graph visualization tool presents structured data through a Canvas or SVG (Scalable Vector Graphics) canvas, including: visualization data coordinate model pre-construction, canvas element rendering and dynamic updating, configuration item theme control, canvas element editing interaction, etc., realizing the presentation and analysis of data for quick viewing and mining of the implied relationships of data.

[0004] The traditional graph visualization scheme has the problems of few configuration methods, poor rendering performance, and poor scalability when processing data presentation. Specifically, 1. Due to the lack of configuration item exposure, the specific presentation of canvas elements such as nodes, lines, and text cannot be controlled during rendering, and the theme is not flexible enough to change, so the actual application cannot well fit the project style. 2. Browser-side rendering is based on SVG or Canvas native implementation, which makes the performance or frame rate decrease exponentially when rendering large amounts of data, and the page lag phenomenon is obvious. 3. The existing scheme can basically only realize the visualization display of data, and the interactivity of canvas elements is relatively missing, and the tool scalability is insufficient. SUMMARY

[0005] The purpose of the present application is to solve the defects mentioned in the background art. By using Canvas+WEBGL (Web Graphics Library) technology, GPU (Graphics Processing Unit) acceleration is called to optimize the rendering performance of large amounts of data on the browser side, which can effectively reduce the page lag phenomenon.

[0006] To achieve the above-mentioned purposes, the application provides a knowledge graph visualization display method, comprising the following steps: (1) inputting the data to be rendered, the canvas element, the event configuration item and the pop-up window object through an initialization method; (2) extracting the configuration item parameters, initializing the basic attributes of the Canvas canvas and the legend, creating a renderer scene, initializing a font template and initializing a renderer instance object; (3) initializing the node, connection line, arrow and text data object model of the scene according to the configuration item parameters; (4) inputting the rendering data and the configuration item parameters into the template engine and starting the calculation, obtaining the node matrix coordinates, the repulsive force between nodes and the connection line coordinates under the current frame number according to the simulation node motion; (5) rendering the node elements, relationship connection line elements, text elements and legend list under the current frame number; (6) continuously performing the template engine calculation through the node motion attenuation, repeating steps (4)-(5) until the node motion force attenuation is 0, storing all the rendering data in the form of an object array, reading the configuration item parameters, and completing the scene element rendering on the canvas and the category list rendering of the nodes on the legend label; (7) after the template engine calculation is completed and the rendering is completed, starting the boundary calculation, obtaining the graph data calculated by the template engine, obtaining the canvas width and height boundary through the configuration item parameters, initializing the zoom scale to 1, calculating the scene element scale to make it completely presented on one screen, and completing the scene layout optimization; (8) obtaining the node and connection line text model initialized in step (3), initializing the model mouse click, mouse-over and right-click content menu events, and exposing them through the configuration item callback; (9) obtaining the legend rendered in step (6), binding the mouse click event to the legend object, and exposing it through the configuration item callback to control the hiding or displaying of the corresponding category elements of the canvas nodes; for example, obtaining the position (x, y) coordinates through the mouse click on the legend canvas, combining the category item coordinates (x, y) and the width and height in the current coordinate system to determine whether the mouse is selected, and if the category item is selected, calling the configuration item callback to hide or display the node data under the category; calling steps (3)-(7) to re-render; (10) obtaining the pop-up window object input in step (1), initializing the corresponding node click pop-up window, node-over pop-up window, node menu pop-up window, connection line click pop-up window and connection line menu pop-up window; binding the node connection line mouse event, determining the pop-up window position by further obtaining the position coordinates (x, y) of the node / connection line, and determining the pop-up window display or hiding according to whether the mouse is selected.

[0007] Further, in step (1), after inputting the data to be rendered, the canvas element, the event configuration item and the pop-up window object, the data is checked whether it meets the interface specification, if there is a problem that does not meet the specification, the specification suggestion is prompted, and the process is terminated; if it is compliant, step 2 process is performed.

[0008] Further, the interface specification includes that the node and the connection are array object format, and the connection object needs to identify the unique identification id of the starting node and the target node.

[0009] Further, in the step (2), initializing the canvas canvas label generates a corresponding canvas, which is used to carry the nodes, connections, texts and other elements in the scene.

[0010] Further, in the step (2), the Legend label is initialized to display the category list to which the node belongs, and the canvas width, height and background color basic style are assigned.

[0011] Further, in the step (3), the node model is initialized to set the node radius, color material, border shadow attribute, the connection model is set to set the length, color material, thickness attribute, the text model is set to set the font size, color and text offset position.

[0012] Further, in the step (6), the node model is instantiated to generate individual nodes by traversing the object array of nodes and connections, the node configuration parameters are read, the node outer ring shadow, selected effect, node circle radius and fill color are rendered, the connection model is instantiated to generate the connection corresponding to the node, the connection arrow size, connection width, text model and legend are filtered through the node list to generate a category list, and the category list is rendered.

[0013] Further, in the step (8), the node model is bound to a click event, the position (x, y) coordinates are obtained by clicking the canvas, the node coordinates (x, y) and the radius in the current coordinate system are combined, and it is judged whether the mouse selects the node, if the node is selected, the node data is transmitted by calling the configuration item callback.

[0014] Compared with the prior art, the beneficial effects of the present application are:

[0015] 1. By using Canvas+WEBGL (Web Graphics Library) technology, GPU (Graphics Processing Unit) acceleration is called to optimize the rendering performance of large data in the browser end, and the page lag phenomenon can be effectively reduced.

[0016] 2. The boundary calculation method solves the demand of one-screen data presentation, the rich configuration item parameters SetOption realize the accurate configuration of the canvas elements, solve the limitation of the tool presentation theme, and fully expose the interactive event output canvas element data, solve the problem of insufficient tool expandability.

[0017] 3. It has a rich pop-up window group, with a graphical boundary calculation algorithm, canvas editing and CSV (Comma-Separated Values) structured data (which can be directly connected with database data) import and export functions, all functions are internally encapsulated, and fully achieve out-of-box use. BRIEF DESCRIPTION OF DRAWINGS

[0018] Figure 1 is a flowchart of an embodiment of the present application;

[0019] Figure 2 is a flowchart of template engine calculation in an embodiment of the present application;

[0020] Figure 3 is a flowchart of boundary calculation in an embodiment of the present application;

[0021] Figure 4 is a display effect of an embodiment of the present application Figure 1 ;

[0022] Figure 5 is a display effect of an embodiment of the present application Figure 2 ;

[0023] Figure 6 is a display effect of an embodiment of the present application Figure 3 ;

[0024] Figure 7 is a display effect of an embodiment of the present application Figure 4 . DETAILED DESCRIPTION

[0025] The technical solutions of the present application will be further described below in combination with the drawings and specific embodiments.

[0026] As shown in Figure 1 , an embodiment of the visual display method of the knowledge graph of the present application has the following steps:

[0027] Step 1, pass in the data to be rendered, the canvas element, the event configuration item, and the pop-up window object through the initialization method; after passing in, at the same time, check whether the data conforms to the interface specification, for example, the node and the connection line need to be in the array object format, and the connection line object needs to identify the unique identifier of the starting node and the target node, generally id; if there is a problem that the data does not conform to the specification, prompt the specification suggestion and terminate the process; if it is in compliance, then proceed to step 2 process;

[0028] Step 2, extract the incoming configuration item parameters, initialize the Canvas canvas, the basic properties of the Legend legend, create the renderer scene, initialize the font template, and initialize the renderer instance object; for example, initializing the canvas canvas will generate the corresponding canvas tag, and the canvas is used to carry the nodes, connections, text, and other elements in the scene; initializing the Legend legend tag is used to display the category list of the nodes, and the canvas width, height, and background color basic styles are assigned;

[0029] Step 3, initialize the node, connection, arrow, and text data object models of the scene according to the incoming configuration item parameters, such as initializing the node model to set the node radius, color material, border shadow attribute, connection model to set the length, color material, and thickness attribute, and text model to set the font size, color, and text offset position;

[0030] Step 4, input the rendering data and configuration item parameters into the template engine and start the calculation, obtain the node matrix coordinates, repulsion force between nodes, and connection coordinates in the current frame number according to the simulation node motion; the template engine calculation process is shown in Figure 2 ;

[0031] Step 5, render the node elements, relationship connection elements, text elements, and legend list in the current frame number;

[0032] Step 6, continue the template engine calculation through node motion attenuation, repeat steps 4-5 until the node motion force decays to 0, store all rendering data in the form of object arrays, read the configuration item parameters, and complete the last frame scene element rendering on the canvas, and complete the node category list rendering on the Legend legend tag; note: traverse the node and connection object arrays, instantiate the node model to generate individual nodes, read the configuration item node configuration parameters, render the node outer ring shadow, selected effect, node circle radius, and fill color, instantiate the connection model to generate node corresponding connections, filter the connection arrow size, connection width, text model, and legend through the node list to generate a category list, and perform rendering;

[0033] Step 7, after the template engine calculation is completed and rendering is completed, start the boundary calculation, obtain the graph data calculated by the template engine, obtain the canvas width and height boundary through the configuration item parameters, initialize the zoom scale to 1, calculate the scene element scaling ratio to make it fully presented on one screen, and complete the scene layout optimization; the boundary calculation process is shown in Figure 3 ;

[0034] Step 8, get the node and connection text model initialized in step 3, initialize the model mouse click, hover, right click contentmenu event, expose externally through the configuration item callback; external needs to implement the selected node or connection, call the configuration item; such as node model binding click event, get the position (x, y) coordinates by clicking the canvas, combine the node coordinates (x, y) and radius in the current coordinate system, judge whether the mouse selects the node, if the node is selected, call the configuration item callback to transmit the node data;

[0035] Step 9, get the legend legend rendered in step 6, bind the mouse click click event to the legend object, expose it through the configuration item callback to control the hiding or displaying of the canvas node corresponding to the category element; such as getting the position (x, y) coordinates by clicking the legend canvas, combining the category item coordinates (x, y) and width and height in the current coordinate system, judging whether the mouse is selected, if the category item is selected, calling the configuration item callback, then hiding or displaying the node data under the category; call step 3-step 7 to re-render;

[0036] Step 10, get the pop-up object passed in step 1, initialize the corresponding node click pop-up window, node hover pop-up window, node menu pop-up window, connection click pop-up window, connection menu pop-up window; bind the node connection mouse event, further get the position coordinates (x, y) of the node / connection to determine the pop-up window position, and judge whether the mouse is selected to decide whether the pop-up window is displayed or hidden.

[0037] Next, use a set of test data as an example,

[0038] Example 1:

[0039] Step 1, prepare a set of graph data to be rendered and configuration items, pop-up objects, call the initialization method.

[0040] Graph data (graphData):

[0041] Node group:

[0042] Node 1: high voltage system, node 2: sensor, node 3: high pressure pump, node 4: leakage, node 5: abnormal sound.

[0043] Connection group:

[0044] Connection 1: subsystem (high voltage system pointing to sensor). Connection 2: subsystem (high voltage system pointing to high pressure pump), connection 3: phenomenon (high voltage system pointing to leakage), connection 4: phenomenon (high voltage system pointing to abnormal sound)

[0045] Configuration items (graphOptions):

[0046] The configuration item mainly includes the following aspects of configuration,

[0047] 1 Whole canvas / legend attribute configuration

[0048] Including canvas width and height, whether it can be scaled, whether it can be dragged, whether it can be clicked / moved in / right-clicked, background color, and graph mode (force-directed graph / tree graph).

[0049] Legend configuration includes legend width and height, background color, whether to display legend items, left position, legend item color,

[0050] 2 Node attribute configuration

[0051] Node radius, node fill color, whether to display outer ring, outer ring color, node shadow color, shadow radius, node selected border color, selected border size.

[0052] 3 Link attribute configuration

[0053] Link color, link length, link thickness, arrow width and height and fill color, whether it is a dashed line, link selected color. Whether to display multiple edges.

[0054] 4 Text attribute configuration

[0055] Font size, font type, text horizontal direction, vertical direction, text color, text rectangle background, text offset, text length, whether to wrap.

[0056] 5 Event configuration

[0057] Node click, node move-in, node right-click event, link click, move-in, right-click event, legend click event.

[0058] Canvas element: workspace.nativeElement

[0059] Popup object (tooltip):

[0060] Including node click popup, node move-in popup, node right-click menu, link click popup, link move-in popup, link right-click popup.

[0061] Call the initialization method to instantiate:

[0062] According to the above step 1, the canvas element (workspace.nativeElement), the rendering data (graphData), the configuration item (graphOptions), and the popup object (tooltip) are input to instantiate.

[0063] The method is called: new Force (workspace. nativeElement, graphData, graphOptions, tooltip).

[0064] Second, as in step 2-3, initialize the generated canvas, legend label, add basic attributes, initialize node, connection, text model.

[0065] Generate canvas label (canvas), that is Figure 4 Window, set the canvas width, height, background color white.

[0066] Generate legend label, that is Figure 4 Left legend part, set the legend element width, height, background color transparent.

[0067] Node model, including the following properties of node:

[0068] Node shadow color, shadow ring color, radius, border color, border width, node coordinates, node gradient color, connection model, including the following properties of connection:

[0069] Connection angle, connection arrow width and height, connection width, color, connection length, connection bending degree.

[0070] Text model, including the following properties of text:

[0071] Font size, font type, text color, alignment (top, center, bottom), text coordinates, whether to wrap.

[0072] Third, through steps 4-6 template engine to calculate the data under the motion of node, and read the configuration item graphOptions parameter, get node, connection coordinates and other attribute information, complete scene element rendering.

[0073] Fourth, boundary calculation scaling ratio, get the optimal rendering scaling value, through the call canvas scaling, get the optimized adjustment layout, as in step 7.

[0074] Fifth, node, connection element binding event, through the configuration item transmission, as in step 8, legend object binding click event, control the filter view of canvas category element, as in step 9.

[0075] As in step 8, get the selected node, connection to realize the binding of mouse event. Step 9 get the legend selected, binding click filter event.

[0076] Mouse click canvas to get position (x, y) coordinates,

[0077] By combining the node coordinates (x, y) and radius under the current coordinate system, it is judged whether the mouse selects the node. If the node is selected, the configuration item callback is called to transmit the node data, and the node event binding is completed.

[0078] By combining the line rectangle range coordinates under the current coordinate system, it is judged whether the mouse selects the line. If the line is selected, the configuration item callback is called to transmit the line data, and the line event binding is completed.

[0079] Similarly, as in step 9 above, the mouse clicks the legend window label to get the position (x, y) coordinates. By combining the legend item coordinates (x, y) and width and height under the current coordinate system, it is judged whether the mouse selects the legend item. If the legend item is selected, the configuration item callback is called to transmit the legend item, and the legend object event binding is completed. The legend item is hidden / displayed under the legend category by returning the legend item.

[0080] Step 6, as in step 10 above, the pop-up window object is bound to the node and line events by the first step, and the display / hiding of the pop-up window is controlled.

[0081] The rendering result is shown in Figure 4 The Node Group corresponds to 5 nodes on the graph, the Link Group corresponds to 4 lines on the graph, and the Event Group is too abstract, so it is not described. The pop-up window template corresponds to the text description box on the right side of the node. For example, the pop-up window on the right side of the sensor node is triggered to display by the node mouse hover move-in event, and is hidden by the mouse move-out of the node. The interaction of other node description boxes is the same.

[0082] Example 2:

[0083] On the basis of the default configuration item in example 1, different scene presentations can be flexibly switched by modifying the configuration parameter values.

[0084] Configuration item changes:

[0085] 1. Hide the legend;

[0086] 2. Display the node text outside;

[0087] 3. Remove the arrow.

[0088] The rendering result is shown in Figure 5 .

[0089] Example 3:

[0090] On the basis of the default configuration item in example 1, different scene presentations can be flexibly switched by modifying the configuration parameter values.

[0091] Configuration item changes:

[0092] 1. Text wrap;

[0093] 2 Hidden legend;

[0094] 3 Use dashed line for connection;

[0095] 4 Bold connection line;

[0096] 5 Connection text is centered.

[0097] The rendering result is as shown in the following Figure 6 .

[0098] Example four:

[0099] On the basis of the default configuration item in example one, different scene presentations can be flexibly switched by modifying the configuration parameter values.

[0100] Configuration item change:

[0101] 1 Switch the graphic mode to tree graph mode

[0102] The rendering result is as shown in the following Figure 7 .

[0103] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present application and not to limit it. Although the present application has been described in detail with reference to the above embodiments, those skilled in the art should understand that the specific embodiments of the present application can be modified or replaced by equivalents without departing from the spirit and scope of the present application. Any modification or equivalent replacement without departing from the spirit and scope of the present application should be covered within the protection scope of the claims of the present application.

Claims

1. A method for visualizing a knowledge graph, characterized in that, Comprise the following steps: (1) by the initialization method into the data to be rendered, canvas element and event configuration, pop-up object; (2) extract the configuration parameters, initialize the Canvas canvas, the basic properties of the legend, create renderer scene, initialize font template, initialize renderer instance object; (3) according to the configuration parameters to initialize the scene node, connection line, arrow, text data object model; (4) render data and configuration parameters into template engine and start computing, get the node matrix coordinates, repulsion force between nodes and connection line coordinates under the current frame number according to the simulation node motion; (5) render the node elements, relationship connection line elements, text elements and legend list under the current frame number; (6) through the node motion attenuation continues to carry out template engine calculation, repeat step (4)-step (5), until the node motion force attenuation is 0, all rendering data is stored in the form of object array, read the configuration parameters, complete the last frame of scene element rendering on the canvas, and complete the node category list rendering on the legend label; (7) after the template engine calculation is completed and the rendering is completed, start the boundary calculation, get the graph data calculated by the template engine, get the canvas width and height boundary through the configuration parameter, initialize the zoom scale to 1, calculate the scene element scaling ratio to make it can be completely presented on the screen, complete the scene layout optimization; (8) get the node and connection line text model initialized in step (3), initialize the model mouse click, move in, right click content menu event, and expose through the configuration item callback; (9) get the legend rendered in step (6), bind the mouse click event to the legend object, and expose through the configuration item callback to control the hiding or displaying of the node corresponding category element on the canvas; for example, get the position (x, y) coordinates by clicking the legend canvas, combine the category item coordinates (x, y) and the width and height in the current coordinate system, judge whether the mouse is selected, if the category item is selected, call the configuration item callback, then hide or display the node data under the category; call step (3)-step (7) to re-render; (10) get the pop-up object passed in step (1), initialize the corresponding node click pop-up window, node move-in pop-up window, node menu pop-up window, connection line click pop-up window, connection line menu pop-up window; Bind the node connection line mouse event, determine the pop-up window position by further getting the position coordinates (x, y) of the node / connection line, and judge whether the mouse is selected to decide whether the pop-up window is displayed or hidden. 2.The method of claim 1, wherein, In step (1), after the data to be rendered, canvas element and event configuration, pop-up object are passed in, the data is checked whether it meets the interface specification, if the data has the problem of not meeting the specification, the specification suggestion is prompted, and the process is terminated; If it is in line with the regulation, step 2 process is carried out. 3.The method of claim 2, wherein, The interface specification includes that the node and connection line should be in array object format, and the connection line object should identify the unique identification id of the starting node and target node. 4.The method of claim 1, wherein, The step (2) initializes the canvas canvas label corresponding to the canvas, and the canvas is used to carry the nodes, connection lines and text elements in the scene.

5. The method of claim 4, wherein, In the step (2), the Legend label is initialized to display the category list to which the nodes belong, and the canvas width, height and background color basic style are assigned. 6.The method of claim 1, wherein, In the step (3), the node model is initialized to set the node radius, color material, border shadow attribute, connection line model to set the length, color material, thickness attribute, and text model to set the font size, color and text offset position. 7.The method of claim 1, wherein, In the step (6), the node model is instantiated to generate individual nodes by traversing the object array of nodes and connection lines, the node configuration parameters are read, the node outer ring shadow, selected effect, node circle radius and fill color are rendered, the connection line model is instantiated to generate the connection line corresponding to the node, the connection line arrow size, connection line width, text model and legend are filtered through the node list to generate a category list, and the category list is rendered. 8.The method of claim 1, wherein, In the step (8), the node model is bound with a click event, the position (x, y) coordinates are obtained by clicking the canvas with a mouse, the node coordinates (x, y) and the radius in the current coordinate system are combined, it is judged whether the mouse selects the node, and if the node is selected, the node data is transmitted by calling the configuration item callback.

Images