CN115292403A - Visual display method of knowledge graph - Google Patents

Abstract

The invention discloses a visual display method of a knowledge graph, which uses Canvas + WEBGL to call a GPU to accelerate and optimize rendering performance of a browser end under large data volume, reduces page pause phenomenon, solves the requirement of one-screen data presentation through a boundary calculation method, realizes accurate configuration of Canvas elements through rich configuration item parameters SetOption, solves the limitation that a tool presentation theme is not flexible enough, and solves the problem of insufficient tool expansibility by fully exposing interactive events to output Canvas element data.

Description

Visual display method of knowledge graph

Technical Field

The invention relates to a visual display method of a knowledge graph, and belongs to the technical field of graph visualization.

Background

Knowledge Graph (KG) is a graph in which knowledge and the mutual relationship between the knowledge and the knowledge are visually displayed by means of a visualization technology, wherein entities serve as nodes in the graph, and semantic relationships between the entities serve as edges of the graph. The knowledge graph breaks data isolation, and machine learning data and knowledge reasoning are facilitated, so that deep knowledge and relationships can be found, and support is provided for intelligent search, intelligent question answering, recommendation and intelligent decision making.

The atlas visualization tool is used for presenting structured data through Canvas or SVG (Scalable Vector Graphics) Canvas, and comprises the following components: the method comprises the steps of visual data coordinate model pre-construction, canvas element rendering and dynamic updating, configuration item theme control, canvas element editing interaction and the like, and the data is presented and analyzed for quickly viewing and mining the relation implied by the data.

The traditional map visualization scheme has the problems of few configuration item methods, poor rendering performance and poor expansibility when data processing is presented. The concrete embodiment is as follows: 1. due to the fact that the missing configuration items are exposed, specific display of canvas elements such as nodes, connecting lines and characters cannot be controlled during rendering, themes are not flexible and changeable, and the project style cannot be well conformed to in practical application. 2. The browser-side rendering is realized based on SVG or Canvas, so that the performance or the frame number is exponentially reduced when large data volume is rendered, and the page pause phenomenon is obvious. 3. The existing scheme can only realize visual display of data basically, has relatively missing interaction of canvas elements and has insufficient tool expansibility.

Disclosure of Invention

The invention aims to solve the defects mentioned in the background technology, and the Canvas + WEBGL (Web graphic library) technology is used for calling a GPU (graphic processor) to accelerate and optimize the rendering performance problem of a browser side under large data volume, so that the page pause phenomenon can be effectively reduced.

In order to achieve the above object, the invention provides a method for visually displaying a knowledge graph, which comprises the following steps: (1) Data to be rendered, canvas elements, event configuration items and popup objects are transmitted through an initialization method; (2) Extracting the incoming configuration item parameters, and initializing the basic properties of Canvas and Legend Legend; creating a renderer scene, initializing a font template and initializing a renderer instance object; (3) Initializing nodes, connecting lines, arrows and character data object models of the scene according to the transmitted configuration item parameters; (4) Accessing rendering data and configuration item parameters into a template engine, starting calculation, and obtaining a node matrix coordinate, an inter-node repulsive force and a connection line coordinate under the current frame number according to the motion of a simulation node; (5) Rendering node elements, relation connecting line elements, character elements and a legend list under the current frame number; (6) Continuously performing template engine calculation through node motion attenuation, repeating the steps (4) to (5) until the node motion attenuation is 0, storing all rendering data in an object array mode, reading configuration item parameters, finishing scene element rendering of the last frame on a canvas, and finishing category list rendering to which the node belongs on a Legend Legend label; (7) After the calculation of the stencil engine is finished and the rendering is finished, starting the boundary calculation, acquiring the image data calculated by the stencil engine, acquiring the width and height boundaries of the painting and layout by configuring item parameters, initializing the zoom ratio zoom to 1, calculating the zoom ratio of scene elements to enable the scene elements to be completely presented on one screen, and finishing the optimization of the scene layout; (8) Acquiring the nodes and the connecting line character model initialized in the step (3), initializing a model mouse click, moving in a hover and right-click content menu event, and calling back to be exposed outwards through configuration items; (9) Acquiring the legend paged rendered in the step (6), binding a mouse click event to the legend object, and calling back and exposing through a configuration item to control the hiding or displaying of the category elements corresponding to the layout nodes; if the mouse clicks the legend canvas to obtain the position (x, y) coordinates, judging whether the mouse is selected or not by combining the category item coordinates (x, y) and the width and the height under the current coordinate system, if the category item is selected, calling a configuration item to call back, and hiding or displaying the node data under the category; calling the step (3) to the step (7) to re-render; (10) Acquiring the popup object transmitted in the step (1), and initializing a corresponding node click popup, a node shift-in popup, a node menu popup, a link click popup and a link menu popup; binding a node connection mouse event, determining the position of a popup window by further acquiring the position coordinates (x, y) of the node/connection line, and judging whether the mouse is selected to determine the display or the hiding of the popup window.

Further, in the step (1), after the data to be rendered, the canvas element, the event configuration item and the popup object are transmitted, whether the data meet the interface specification is checked, if the data do not meet the specification, a specification suggestion is prompted, and the flow is terminated; and if the standard is met, performing the step 2 process.

Furthermore, the interface specification includes that the nodes and the connecting lines need to be in an array object format, and the connecting line object needs to identify the unique identification id of the starting node and the target node.

Further, in the step (2), initializing canvas generates corresponding canvas tag, and the canvas is used to carry elements such as nodes, lines, and characters in the scene.

Further, in the step (2), the Legend legacy label is initialized to display the category list to which the node belongs, and the canvas is given a base style of width and height and background color.

Further, the step (3) includes initializing a node model to set a node radius, a color material, a border shadow attribute, a link model setting length, a color material, a thickness attribute, a character model setting font size, a color, and a character offset position.

Further, in the step (6), node models are instantiated to generate individual nodes by traversing object arrays of the nodes and the links, configuration parameters of the configuration items of the nodes are read, node outer ring shadows, selected effects, node circle radii, filling colors and the like are rendered, the link models are instantiated to generate corresponding links of the nodes, the sizes of arrows of the links, the widths of the links, the character models and the legends are subjected to category filtering through a node list, a category list is generated, and rendering is performed.

Further, in the step (8), a click event is bound to the node model, a mouse clicks the canvas to obtain a position (x, y) coordinate, whether the mouse selects a node is judged according to the node coordinate (x, y) and the radius in the current coordinate system, and if the node is selected, a configuration item is called to call back to transmit the node data.

Compared with the prior art, the invention has the following beneficial effects:

1. by using the Canvas + WEBGL (Web graphic library) technology, a GPU (graphic processor) is called to accelerate and optimize the rendering performance problem of a browser end under large data volume, and the page pause phenomenon can be effectively reduced.

2. The requirement of one-screen presentation of data is met through a boundary calculation method, the accurate configuration of canvas elements is achieved through rich configuration item parameters SetOption, and the limitation that the tool presentation theme is not flexible enough is solved. By fully exposing the interactive event output canvas element data, the problem of insufficient tool expansibility is solved.

3. The method has rich popup groups, has functions of graph boundary calculation algorithm, canvas editing and CSV (Comma-Separated Values) structured data (which can be directly butted with database data) importing and exporting, and has the advantages of internal encapsulation of all functions and full realization of out-of-box use.

Drawings

FIG. 1 is a flow chart of one embodiment of the present invention;

FIG. 2 is a flow diagram of the stencil engine calculation in one embodiment of the invention;

FIG. 3 is a flow diagram of boundary calculation in one embodiment of the invention;

FIG. 4 is a first illustration of the effect of the present invention;

FIG. 5 is a second illustration of the effect of the present invention;

FIG. 6 is a third illustration of the effect of the present invention;

fig. 7 is a fourth illustration of the effect of the embodiment of the present invention.

Detailed Description

The technical solution of the present invention is further explained with reference to the accompanying drawings and the specific embodiments.

As shown in fig. 1, an embodiment of the method for visually displaying a knowledge-graph of the present invention comprises the following steps:

step 1, data to be rendered, canvas elements, event configuration items and popup objects are transmitted through an initialization method; after the data is transmitted, whether the data accords with the interface specification is simultaneously checked, if the nodes and the connecting lines need to be in an array object format, and the connecting line object needs to identify the unique identifiers of the starting node and the target node, generally id; if the data has the problem of not meeting the standard, prompting a standard suggestion and terminating the process; if the conditions are met, the flow of the step 2 is carried out;

step 2, extracting the transmitted configuration item parameters, and initializing the basic properties of Canvas and Legend Legend; creating a renderer scene, initializing a font template and initializing a renderer instance object; if the canvas is initialized, a corresponding canvas label is generated, and the canvas is used for bearing elements such as nodes, connecting lines and characters in a scene; initializing a Legend Legend label for displaying a category list to which the node belongs, and giving a canvas width and height and a background color basic style;

step 3, initializing nodes, connecting lines, arrows and character data object models of the scene according to the transmitted configuration item parameters, wherein the initialized node models are used for setting node radius, color material, border shadow attribute, connecting line model setting length, color material, thickness attribute, character model setting font size, color and character offset position;

step 4, accessing the rendering data and the configuration item parameters into a template engine, starting calculation, and obtaining a node matrix coordinate, a node repulsive force and a connecting line coordinate under the current frame number according to the motion of the simulation nodes; the template engine calculation flow is shown in FIG. 2;

step 5, rendering a node element, a relation connecting line element, a character element and a legend list under the current frame number;

step 6, calculating a template engine continuously through node motion attenuation, repeating the step 4 to the step 5 until the node motion attenuation is 0, storing all rendering data in an object array mode, reading configuration item parameters, finishing rendering of scene elements of the last frame on a canvas, and finishing rendering of a category list to which the nodes belong on a Legend Legend label; description of the drawings: instantiating a node model to generate individual nodes by traversing an object array of the nodes and the connecting lines, reading configuration parameters of the nodes of configuration items, rendering the shadow of the outer ring of the nodes, the selected effect, the radius of the circle of the nodes, the filling color and the like, instantiating the connecting line model to generate the corresponding connecting lines of the nodes, filtering the sizes of the arrows of the connecting lines, the widths of the connecting lines, the character models and the legends in a category mode through a node list, generating a category list, and rendering the category list;

step 7, after the calculation of the stencil engine is finished and the rendering is finished, starting the boundary calculation, acquiring the image data calculated by the stencil engine, acquiring the width and height boundaries of the painting cloth through configuration item parameters, initializing the zoom ratio zoom to 1, calculating the zoom ratio of the scene elements to enable the scene elements to be completely presented on one screen, and finishing the optimization of the scene layout; the boundary calculation flow is shown in fig. 3;

step 8, acquiring the node and the link character model initialized in the step 3, mouse clicking click, moving into the event such as hover and right button contentmenu and the like by the initialization model, and calling back to be exposed to the outside through configuration items; when the selected node or the connection line is needed to be realized externally, the configuration item is called; if the node model binds a click event, acquiring a position (x, y) coordinate by clicking canvas with a mouse, judging whether the mouse selects a node or not by combining the node coordinate (x, y) and the radius under the current coordinate system, and calling a configuration item to call back to transmit the node data if the node is selected;

step 9, obtaining the legend Legend rendered in the step 6, binding a mouse click event to the legend object, and calling back and exposing through a configuration item to control the hiding or displaying of the category elements corresponding to the drawing nodes; if the mouse clicks the legend canvas to obtain the position (x, y) coordinates, judging whether the mouse is selected or not by combining the category item coordinates (x, y) and the width and the height under the current coordinate system, if the category item is selected, calling a configuration item to call back, and hiding or displaying the node data under the category; calling the step 3 to the step 7 for re-rendering;

step 10, acquiring the popup object transmitted in the step 1, and initializing a corresponding node click popup, a node shift-in popup, a node menu popup, a link click popup and a link menu popup; binding a node connection mouse event, determining the position of a popup window by further acquiring the position coordinates (x, y) of the node/connection line, and judging whether the mouse is selected to determine the display or the hiding of the popup window.

The following is an example of a set of test data,

the first example is as follows:

the first step, as step 1, is to prepare a set of drawing data to be rendered, configuration items and popup objects, and call an initialization method.

Graph data (graphData):

and (3) node group:

and the node 1: high voltage system, node 2: sensor, node 3: high-pressure pump, node 4: leakage, node 5: abnormal sound.

A connecting line group:

line 1: subsystem (high voltage system pointing sensor). And (3) connecting a wire 2: subsystem (high pressure system pointing to high pressure pump), line 3: phenomenon (high pressure system pointing to leakage), line 4: phenomenon (high pressure system directional abnormal sound)

Configuration items (graphpactions):

the configuration items mainly comprise the following configurations,

1 Overall canvas/legend Attribute configuration

Including the width and height of the canvas and whether the canvas is scalable. Whether it is draggable. Click/move/right button, background color, graphical mode (force directed graph/tree).

The legend configuration includes legend width height, background color, whether legend items are displayed, left position, legend item color,

2 node attribute configuration

The node radius, the node filling color, whether an outer ring is displayed or not, the outer ring color, the node shadow color, the shadow radius, the node selected frame color and the selected frame size.

3 wire attribute configuration

The color of the connecting line, the length of the connecting line, the thickness of the connecting line, the width and the height of an arrow, the filling color, whether the arrow is a broken line or not and the color of the connecting line is selected. Whether multiple edges are displayed.

4-word attribute configuration

Font size, font type, horizontal direction, vertical direction, text color, text rectangular background, text offset, text length, whether to change lines.

5 event configuration

Node clicking, node moving-in, node right-click events, line clicking, moving-in, right-click events and legend clicking events.

Canvas elements: workplace. Native element

Popup object (popup):

the method comprises the steps of clicking a popup by a node, moving the node into the popup, clicking a menu on the right button of the node, clicking the popup by a connecting line, moving the connecting line into the popup and connecting the right button of the connecting line.

Calling an initialization method for instantiation:

corresponding to the step 1, a canvas element (workspace. Native element), rendering data (graphics data), configuration items (graphics operations), and a popup object (tooltip) are imported for instantiation.

The calling method comprises the following steps: new Force (workspace. Native element, graph data, graph options, tooltip).

And step two, as the step 2 to the step 3, initializing to generate canvas and legend labels, adding basic attributes, and initializing nodes, connecting lines and character models.

A canvas label (canvas), i.e., the window of fig. 4, is generated, setting the canvas width, height, and the background color to white.

The legend label, i.e., the legend section on the left side of fig. 4, is generated, setting the legend element width, height, and background color to transparent.

The node model comprises the following properties of the nodes:

node shadow color, shadow outer ring color, radius, frame color, frame width, node coordinates, node gradient color and a connecting line model, and the node shadow color comprises the following attributes of the connecting line:

the angle of the connecting line, the width and the height of the connecting line arrow, the width of the connecting line, the color, the length of the connecting line and the bending degree of the connecting line.

The character model comprises the following characters:

font size, font type, text color, alignment mode (top, middle, bottom), text coordinates, whether to wrap.

And thirdly, calculating data under node motion through the template engine in the steps 4-6, reading configuration item graphpactions parameters, obtaining attribute information such as nodes and connecting line coordinates, and finishing scene element rendering.

And fourthly, calculating the scaling ratio of the boundary to obtain an optimal rendering scaling value, and obtaining the layout after optimization and adjustment by calling canvas scaling, as in the step 7.

And step five, transmitting the binding events of the nodes and the connecting elements through configuration items, as the step 8, controlling the screening and checking of the elements of the drawing types by binding click events of the drawing objects, as the step 9.

And step 8, binding the mouse event by acquiring the selected node and the connecting line. And 9, obtaining a legend selection, and binding click screening events.

Mouse clicks on the canvas to obtain the location (x, y) coordinates,

and judging whether the mouse selects a node or not by combining the coordinates (x, y) and the radius of the node in the current coordinate system, and calling a configuration item to call back and transmit the data of the node if the node is selected, thereby finishing the binding of the node event.

And judging whether the connection line is selected by the mouse by combining the coordinates of the rectangular range of the connection line in the current coordinate system, and calling the configuration item to call back to transmit the connection line data if the connection line is selected, so as to finish the binding of the connection line event.

Similarly, as in step 9, the mouse clicks the legend window label to obtain the position (x, y) coordinate, and by combining the legend item coordinate (x, y) and the width and height in the current coordinate system, it is determined whether the legend item is selected by the mouse, if so, the configuration item is called to call back to transmit the legend item, thereby completing the event binding of the legend object, and the nodes and links under the legend category are hidden/displayed by the returned legend item.

Sixthly, as shown in the step 10, the display/hiding of the popup is controlled through the popup object binding node and the connection event transmitted in the step 10.

The rendering result is shown in fig. 4, the Node Group corresponds to 5 nodes on the graph, the Link Group corresponds to 4 connecting lines on the graph, and the Event Group is too abstract, so that no description is made on the Event Group. And the popup template corresponds to the character description frame on the right side of the node. If the sensor node is in a popup window on the right side, the description frame is moved into an event through the node mouse, the event is triggered to display, the mouse is moved out of the node to be hidden, and the interaction of the description frames of other nodes is the same.

Sample two:

on the basis of the sample-default basic configuration item, different scene presentations can be flexibly switched by modifying the configuration parameter values.

Configuration item change:

1. hiding the legend;

2. displaying the node characters externally;

3. the arrow is removed.

The rendering result is shown in fig. 5.

Sample three:

on the basis of the sample-default basic configuration item, different scene presentations can be flexibly switched by modifying the configuration parameter values.

Configuration item change:

1. the characters exceed the line feed;

2. hiding the legend;

3. the connecting lines use dotted lines;

4. thickening a connecting line;

5. the line character is centered.

The rendering results are shown in fig. 6 below.

Sample four:

on the basis of the sample-default basic configuration item, different scene presentations can be flexibly switched by modifying the configuration parameter values.

Configuration item change:

1. switching graphics mode to tree mode

The rendering result is shown in fig. 7.

Finally, it should be noted that the above embodiments are only used for illustrating the technical solutions of the present invention and not for limiting the same, and although the present invention is described in detail with reference to the above embodiments, those of ordinary skill in the art should understand that: modifications and equivalents may be made to the embodiments of the invention without departing from the spirit and scope of the invention, which is to be covered by the claims.

Claims (8)

1. A visual display method of knowledge graph is characterized by comprising the following steps:

(1) Data to be rendered, canvas elements, event configuration items and popup objects are transmitted through an initialization method;

(2) Extracting the incoming configuration item parameters, and initializing the basic properties of Canvas and Legend Legend; creating a renderer scene, initializing a font template and initializing a renderer instance object;

(3) Initializing a node, a connecting line, an arrow and a character data object model of a scene according to the transmitted configuration item parameters;

(4) Accessing rendering data and configuration item parameters into a template engine, starting calculation, and obtaining a node matrix coordinate, an inter-node repulsive force and a connection line coordinate under the current frame number according to the motion of a simulation node;

(5) Rendering a node element, a relation connecting line element, a character element and a legend list under the current frame number;

(6) Continuously performing template engine calculation through node motion attenuation, repeating the steps (4) to (5) until the node motion attenuation is 0, storing all rendering data in an object array mode, reading configuration item parameters, finishing scene element rendering of the last frame on a canvas, and finishing category list rendering of the node on a Legend Legend label;

(7) After the calculation of the stencil engine is finished and the rendering is finished, starting the boundary calculation, acquiring the image data calculated by the stencil engine, acquiring the width and height boundaries of the painting and layout by configuring item parameters, initializing the zoom ratio zoom to 1, calculating the zoom ratio of scene elements to enable the scene elements to be completely presented on one screen, and finishing the optimization of the scene layout;

(8) Acquiring the nodes and the connecting line character models initialized in the step (3), initializing the models, clicking click by a mouse, moving into a hover and right-key content menu events, and calling back to be exposed to the outside through configuration items;

(9) Acquiring the legend paged rendered in the step (6), binding a mouse click event to the legend object, and calling back and exposing through a configuration item to control the hiding or displaying of the category elements corresponding to the layout nodes; if the mouse clicks the legend canvas to obtain the position (x, y) coordinates, judging whether the mouse is selected or not by combining the category item coordinates (x, y) and the width and the height under the current coordinate system, if the category item is selected, calling a configuration item to call back, and hiding or displaying the node data under the category; calling the step (3) to the step (7) to re-render;

(10) Acquiring the popup object transmitted in the step (1), and initializing a corresponding node click popup, a node shift-in popup, a node menu popup, a link click popup and a link menu popup; binding a node connection mouse event, determining the position of a popup window by further acquiring the position coordinates (x, y) of the node/connection line, and judging whether the mouse is selected to determine the display or the hiding of the popup window.

2. The method for visually displaying the knowledge graph according to claim 1, wherein in the step (1), after the data to be rendered, the canvas elements, the event configuration items and the popup objects are transmitted, whether the data meet the interface specification is checked, if the data do not meet the specification, a specification suggestion is prompted, and the process is terminated; and if the standard is met, performing the step 2 process.

3. The method for visually displaying a knowledge graph according to claim 2, wherein the interface specification comprises that nodes and links need to be in an array object format, and the link object needs to identify unique identification ids of a starting node and a target node.

4. The method for visually displaying a knowledge graph according to claim 1, wherein in the step (2), initializing canvas generates corresponding canvas tags, and the canvas is used for bearing nodes, links and text elements in a scene.

5. The method for visually displaying the knowledge-graph according to claim 4, wherein in the step (2), an Legend Legend label is initialized to display a category list to which the node belongs, and a canvas base style with width and height and background color is given.

6. The method for visually displaying the knowledge-graph according to claim 1, wherein the step (3) comprises initializing a node model to set a node radius, a color material, a border shadow attribute, a connection model setting length, a color material, a thickness attribute, a character model setting font size, a color and a character offset position.

7. The method for visually displaying a knowledge graph according to claim 1, wherein in the step (6), node models are instantiated to generate individual nodes by traversing object arrays of nodes and links, configuration item node configuration parameters are read, node outer ring shadows, selection effects, node circle radii and filling colors are rendered, the links corresponding to the nodes are generated by the instantiated link models, and the link arrow size, link width, character models and legends are subjected to category filtering by a node list to generate a category list for rendering.

8. The method for visually displaying a knowledge graph according to claim 1, wherein in the step (8), a click event is bound to the node model, a mouse is used to click on a canvas to obtain a position (x, y) coordinate, the coordinate (x, y) and a radius of the node in the current coordinate system are combined to judge whether the mouse selects the node, and if the node is selected, a configuration item is called to call back to transmit the node data.

Images