CN112380357B - Method for realizing interactive navigation of knowledge graph visualization - Google Patents
Method for realizing interactive navigation of knowledge graph visualization Download PDFInfo
- Publication number
- CN112380357B CN112380357B CN202011428870.0A CN202011428870A CN112380357B CN 112380357 B CN112380357 B CN 112380357B CN 202011428870 A CN202011428870 A CN 202011428870A CN 112380357 B CN112380357 B CN 112380357B
- Authority
- CN
- China
- Prior art keywords
- navigator
- main
- area
- map
- viewport
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
- G06F16/36—Creation of semantic tools, e.g. ontology or thesauri
- G06F16/367—Ontology
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04842—Selection of displayed objects or displayed text elements
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Life Sciences & Earth Sciences (AREA)
- Animal Behavior & Ethology (AREA)
- Computational Linguistics (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- Instructional Devices (AREA)
- Navigation (AREA)
Abstract
A method for realizing interactive navigation of knowledge graph visualization comprises the following steps: on the premise that the primary map drawing method of the knowledge map is written, drawing a synchronous dynamic navigation map in a preset navigator; adding a brush layer to the navigator to display the position and the size of the current viewport of the main picture relative to the node area of the full picture; the current visual area of the main map is mapped to a browser layer, so that the browser layer can change the corresponding size and position when the main map moves, zooms and drags nodes; calculating the position of the main graph node area relative to the viewport according to the position of the brush in the navigator; correcting the navigator according to the main pattern layout form; and (4) correcting the content of the navigator by switching according to the main pattern layout form. The invention is more intuitive, friendly and accurate to provide the size and position relation between the current viewport of the main picture and the whole picture, and solves the problem that the traditional thumbnail can not reflect the dynamic change of the main picture in real time.
Description
Technical Field
The invention relates to the field of knowledge graph visualization, in particular to a method for realizing interactive navigation of knowledge graph visualization.
Background
Knowledge Graph (Knowledge Graph) is called a Knowledge domain visualization or Knowledge domain mapping map in the book intelligence world, and is a series of different graphs for displaying the relationship between the Knowledge development process and the structure, describing Knowledge resources and carriers thereof by using a visualization technology, and mining, analyzing, constructing, drawing and displaying Knowledge and the mutual relation between the Knowledge resources and the carriers.
Because the knowledge graph has the advantages of intuition, comprehensiveness, clearness, self-definition and the like in the aspect of data display, the knowledge graph is applied to more and more industries needing to sort and analyze a large amount of data along with the development of the modern society.
When analyzing more data or more complex data using a knowledge graph, if the whole graph is displayed inside a window, a single node may be too small, and if the node is enlarged to a suitable size, the window may only display a part of the content of the graph. Meanwhile, in most cases, the size, position, and layout of the nodes and their associated links need to be adjusted according to the desire of the analyst. The common thumbnail format cannot meet the requirement of data analysis, so a dynamic visual navigator is urgently needed.
Disclosure of Invention
In view of the above, the present invention has been developed to provide a method for a knowledgeable graph visualization interactively navigable implementation that overcomes or at least partially addresses the above-identified problems.
In order to solve the technical problem, the embodiment of the application discloses the following technical scheme:
a method for realizing interactive navigation of knowledge graph visualization is characterized by comprising the following steps:
s100, on the premise that the primary knowledge graph drawing method is written, drawing a synchronous dynamic navigation graph in a preset navigator;
s200, adding a brush layer to the navigator to display the position and the size of the current viewport of the main picture relative to the node area of the full picture;
s300, mapping the current visual area of the main map to a browser layer of the navigator, so that when the main map moves, zooms and drags nodes, the browser layer can change the corresponding size and position;
s400, calculating the position of the main graph node area relative to the viewport according to the position of the brush in the navigator, and realizing that the main graph viewport can always keep consistent with the brush area of the navigator when the brush in the navigator is moved;
s500, correcting the navigator according to the layout form of the main map;
and S600, correcting the content of the navigator by switching according to the layout form of the main map.
Further, the specific method of S100 is:
s101, dynamically acquiring the size of a current main picture window according to different display resolutions and the size of a window reserved for a navigation map in a preset navigator;
s102, respectively calculating the width and height scaling ratios of the main map when the main map is mapped to the navigator according to the size of the obtained window;
s103, designing a navigation drawing method;
s104, after the method for loading the main graph is carried out, a method for drawing the navigation graph is introduced, the main graph and the navigator are guaranteed to be drawn simultaneously, and therefore when the main graph node is dragged, the navigation graph node is dragged synchronously;
and S105, calculating the proportion to carry out secondary zooming on the navigation map according to the size of the whole map and the size of the view port of the navigator, and ensuring that the whole map is displayed in the view port of the navigator.
Further, the specific method of S103 is: and on the basis of the main map drawing method, transmitting the scaling obtained by calculation in the step S102, adding the scaling for calculation when drawing various widths, heights and image sizes, keeping the overall shape and animation of the navigation map consistent with the main map, only scaling the navigation map, and removing the character rendering of nodes and connecting lines in the navigation map drawing method.
As a further step, the specific method of S105 is:
s1051, calculating the proportion of the secondary zooming of the navigator according to the current position size of the node area of the navigation map relative to the viewport of the navigation map. If the node area exceeds the viewport, carrying out secondary zooming, and if the node area does not exceed the viewport, not carrying out secondary zooming;
s1052, calculating the center coordinate of the SVG coordinate area of the navigator according to the secondary scaling calculated in the S1051 and the width and height of the viewport of the navigator;
s1053, combining a transform attribute according to the secondary zoom scale calculated in S1051 and the SVG center coordinate calculated in S1052, and adding the transform attribute into the node attribute of the navigator so as to zoom by taking the center of the navigator as a reference when the node area exceeds the viewport, wherein the zoom result is that the node area is just inside the window of the navigator and has a gap from a border;
further, the specific method of S200 is:
s201, when the navigator is loaded, giving a brush layer to the navigator SVG through a brush component of D3.Js according to preset coordinate variables of upper left vertex and lower right vertex of a brush area;
s202, mouse interaction operation of a brush frame and a background is forbidden by using a pointer-events attribute of the CSS, so that a user can only drag the brush area.
Further, the specific method of S300 is:
s301, obtaining area parameters of a main map node area, a main map view port area, a navigator node area and a navigator view port area;
s302, calculating the upper, lower, left and right distances between the main map node area and the viewport area and calculating the upper and left distances between the navigator node area and the viewport area according to the area parameters obtained in S301;
s303, calculating the width and height scaling ratios of the main map and the navigation map by using the width and the height respectively according to the area parameters acquired in the S301;
s304, when a user actively zooms the main picture, obtaining the scaling of the actively zoomed main picture;
s305, calculating coordinates of upper left vertex and lower right vertex of the break area according to the distances and the scaling ratios obtained in S302 and S303, namely the upper distance, the lower distance, the left distance and the right distance between the break area and a viewport area of the navigator;
and S305, calling a move method of the brush component in the D3.Js according to the coordinates of the top left vertex and the bottom right vertex of the brush area calculated in the S304, and setting the position and the size of the brush area, so that the main graph is mapped to the navigator in real time.
Further, the specific method of S400 is:
s401, acquiring the position of a break area in the navigator relative to a viewport of the navigator, namely acquiring a selection attribute of a break component through an event in D3.Js to acquire a two-dimensional array of coordinates of a top left vertex and a bottom right vertex of the break area.
S402, calculating a navigation map area covered by the break area through a formula according to the width and height scaling calculated in S102, the secondary scaling calculated in S105, the main map scaling obtained in S304 when the user actively scales the main map and the position of the break area obtained in S401 relative to a viewport of a navigator, and mapping the transform offset and the scaling quantity of the main map when the break area is mapped to the main map;
and S403, according to the attribute of the event in the D3.Js, acquiring whether the current user operates the main graph or the navigator break, and judging the addition condition of the calculation formula in S305 and S402 according to the operation of the main graph or the break.
Further, the specific method of S500 is:
s501, dividing layout forms into two main categories of center alignment and upper left corner alignment, wherein the center alignment layout takes the center point of the navigator as a zoom origin point
S502, adding a judgment condition for the calculation formula in 4.2, and if the current layout is a center-aligned layout, directly applying the calculation formula in 4.2; if the current layout is the layout with the aligned upper left corner, the calculation formula in 4.2 needs to be corrected, and the offset of the center of the coordinate system is removed.
Further, the specific method of S600 is:
s601, dividing each layout form into two main categories of dynamic layout and static layout, wherein after the main map is loaded and a user drags the node, the dynamic layout can automatically carry out inertial movement
S602, when the main graph is switched to be distributed, inquiring a dynamic and static dictionary of the distribution, and judging whether the stop is needed and the animation effect is not completed.
The technical scheme provided by the embodiment of the invention has the beneficial effects that at least:
the invention discloses a method for realizing visual and interactive navigation of a knowledge graph, which provides a visual and interactive dynamic navigation graph for a person who checks and analyzes when checking the knowledge graph, compared with the traditional thumbnail, the method is more visual, friendly and accurate in providing the size and position relation of a current viewport of a main graph and a whole graph, and can quickly position the main graph to be checked in a navigator by the method; especially for dynamic layout, the traditional thumbnail cannot reflect the dynamic change of the main graph in real time, and the invention can perfectly realize synchronous interaction with the main graph.
The technical solution of the present invention is further described in detail by the accompanying drawings and embodiments.
Drawings
The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description serve to explain the principles of the invention and not to limit the invention. In the drawings:
FIG. 1 is a flowchart of a method for generating a knowledge-graph interactive navigator in embodiment 1 of the present invention;
fig. 2 is a schematic diagram of a simulation result after a knowledge graph interactive navigator is generated in embodiment 1 of the present invention;
fig. 3 is a schematic diagram of a brush after a knowledge graph interactive navigator is generated in embodiment 2 of the present invention.
Detailed Description
Exemplary embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be embodied in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.
In order to solve the problems in the prior art, the embodiment of the invention provides a method for realizing the visualization of a knowledge graph and interactive navigation.
Example 1
The embodiment discloses a method for realizing knowledge graph visualization interactive navigation, as shown in fig. 1, including:
s100, on the premise that the primary knowledge graph drawing method is written, drawing a synchronous dynamic navigation graph in a preset navigator. The result of this step is shown in FIG. 2.
In this embodiment, the specific method of S100 is as follows:
s101, dynamically acquiring the size of a current main picture window according to different display resolutions and the size of a window reserved for a navigation map in a preset navigator;
s102, respectively calculating the width and height scaling ratios of the main map when the main map is mapped to the navigator according to the size of the obtained window;
s103, designing a navigation drawing method; in some preferred embodiments, the specific method of S103 is: and on the basis of the main map drawing method, transmitting the scaling obtained by calculation in the step S102, adding the scaling for calculation when drawing various widths, heights and image sizes, keeping the overall shape and animation of the navigation map consistent with the main map, only scaling the navigation map, and removing the character rendering of nodes and connecting lines in the navigation map drawing method. Because the navigation map is generally small and the characters cannot be seen clearly, the method is cut out to reduce the resource consumption during drawing, and simultaneously, the visual effect of the navigator is more refreshing and visual.
S104, after the method for loading the main map is carried out, a method for drawing the navigation map is introduced to ensure that the main map and the navigator are drawn simultaneously, so that when the main map node is dragged, the nodes of the navigation map are dragged synchronously;
and S105, calculating the proportion to carry out secondary zooming on the navigation map according to the size of the whole map and the size of the view port of the navigator, and ensuring that the whole map is displayed in the view port of the navigator. Because the size of the initial main graph node is fixed, when the number of nodes is large, the area of the main graph node exceeds the main graph view port. At this time, the navigation map obtained by the primary zoom in 1.3.1 also correspondingly exceeds the view port of the navigator, so that the secondary zoom is needed to make the node area of the whole map just displayed in the view port of the navigator.
In some preferred embodiments, the specific method of S105 is:
s1051, calculating the proportion of the secondary zooming of the navigator according to the current position size of the node area of the navigation map relative to the viewport of the navigation map. If the node area exceeds the viewport, carrying out secondary zooming, and if the node area does not exceed the viewport, not carrying out secondary zooming; under the condition that secondary zooming is needed, the zooming ratios of width and height are respectively calculated according to the width and height difference of the navigator node area and the viewport area, and the smaller one of the calculation results of the width and the height is taken as the zooming reference ratio. When calculating the quadratic scaling, to make the node area close to but not touch the viewport border, 0.1 is subtracted from the final calculation result to obtain a more friendly visual effect.
S1052, calculating the central coordinate of the SVG coordinate area of the navigator according to the quadratic scaling calculated in the S1051 and the width and the height of the viewport of the navigator;
and S1053, combining a transform attribute according to the secondary zoom scale calculated in S1051 and the SVG center coordinate calculated in S1052, and adding the transform attribute to the node attribute of the navigator to zoom by taking the center of the navigator as a reference when the node area exceeds the viewport, wherein the zoom result is that the node area is just inside the window of the navigator and has a gap from the frame. Since redrawing is not often required for navigator rescaling, the redrawing interval can be set by setting a counter in order to save hardware resources.
Preferably, the specific operation method of S100 is as follows:
1.1 note that the main map drawing method completed is drawMain () and the navigation map drawing method is drawThumb ().
1.2 because the navigator rendering method is difficult to multiplex with many changes to the main map rendering method, adding one copy of the drawMain () content to the drawThumb () to be changed.
1.3 obtaining the region parameters of the main picture and the navigator viewport by using a native js getBoundingClientRect () method, and obtaining the current main picture width mainWidth, the main picture height mainHeight, the navigator width thumbWidth and the navigator height thumbHeight. Then, according to the width and height of the main map and the navigator, the width ratio width = thumb width/main width and the height ratio height = thumb height/main height are calculated.
1.4draw thumb () delete draw node words, link words, delete mouse translation, zoom method, in the remaining drawing method, according to the situation, add width Scale or height Scale when calculating the offset coordinate, drawing the figure size, calculate, produce the preliminary navigation chart.
1.5 when the node area of the preliminary navigation map is wide or higher than the viewport of the navigator, carrying out secondary zooming on the navigation map.
1.5.1 obtaining the parameter of the node area of the navigator by using a getBoundingClientRect () method of the original js, and obtaining the width of the node area of the current navigator, which is the thumbNodeWidth, and the height of the node area of the navigator, which is the thumbNodeHeight. And calculating a width difference width = thumb width-thumb node width and a height difference height = thumb height-thumb node height according to the navigator node area width and the navigator viewport width and height obtained in 1.3.
1.5.2 calculating the smaller of width Difference and height Difference, marking as minDifference, and judging whether minDifference is more than 0. If the value is larger than 0, the node area can be completely positioned in the viewport, so that the quadratic scaling is not needed, the quadratic scaling is directly set to 1, and the step 1.5.3 is skipped; if the number of the node areas is less than 0, the node areas overflow the view ports, and 1.5.3 steps are needed for carrying out secondary zooming on the navigation map.
1.5.3 obtaining the parameters of the main map node area by using a native js getBoundingClientRect () method, and obtaining the width of the current main map node area, namely the main map node width, and the height of the main map node area, namely the main map node height. Note that the preliminary secondary scaling is tempThumbScale, tempThumbScale = mainWidth/mainnodefidth if the width difference is small, and tempThumbScale = mainHeight/mainnodoheght if the height difference is small. From the viewpoint of page aesthetics and friendliness, the node region should be slightly spaced from the viewport region, so that the final quadratic scaling is "thumbScale" = tempThumbScale-0.1.
1.5.4 using the select method of D3.Js, obtaining each element in the SVG, including nodes, connecting lines, node characters, node images, connecting line characters, etc., and adding scaling to the elements using the attr method of D3.Js and the transform attribute of SVG, attr (' transform ', ' transform (0, 0) scale ()).
1.5.5 this step is optional, because the size of the navigation map does not need to zoom twice often, so can be the external counter of the twice zooming method in 1.5.4, set up every n changes of the main map as required, carry out the twice zooming method of the navigation map once.
S200, adding a brush layer to the navigator to display the position and the size of the main map current viewport relative to the full map node area.
In this embodiment, the specific method of S200 is:
s201, when the navigator is loaded, endowing a brush layer to the navigator SVG through a brush component of D3.Js according to preset coordinate variables of upper left vertex and lower right vertex of a brush area;
s202, mouse interaction operation of a brush frame and a background is forbidden by using a pointer-events attribute of the CSS, so that a user can only drag the brush area. Because the main view port is determined during loading, the width and height ratio is fixed, and the brush area needs to correspond to the main view port, the free brushing function of the brush component needs to be forbidden, including clicking a blank to redraw the brush area and dragging a border of the brush area to adjust the size. And since the brush component is a highly encapsulated component of D3.Js and no API is given to set this property, the correction is chosen in the form of CSS modification.
Preferably, the specific operation method of S200 is:
2.1. a brush method variable is created using the brush () method of d3. Js.
2.2. And adding g elements for the SVG of the navigation map by using an apend () method of D3. Js. And calling a break method variable by the g element variable, and calling a move method of the break to endow the break with an initial area.
2.3. And assigning pointer-events of the CSS to the frame and the bottom layer generated by the brush, wherein the attribute of none is assigned to the CSS, and mouse interaction is forbidden.
S300, the current visual area of the main image is mapped to a browser layer of the navigator, and when the main image is moved, zoomed and node dragged, the browser layer can change the corresponding size and position.
In this embodiment, the specific method of S300 is as follows:
s301, obtaining area parameters of a main picture node area, a main picture view port area, a navigator node area and a navigator view port area;
s302, calculating the upper, lower, left and right distances between the main map node area and the viewport area and calculating the upper and left distances between the navigator node area and the viewport area according to the area parameters obtained in S301;
s303, calculating the width and height scaling ratios of the main map and the navigation map by using the width and the height respectively according to the area parameters acquired in the S301;
s304, when a user actively zooms the main picture, obtaining the zoom ratio of the actively zoomed main picture;
s305, calculating coordinates of top left and bottom right vertexes of the brush area according to the distances and the scaling ratios acquired in S302 and S303, namely the top, bottom, left and right distances between the brush area and a viewport area of the navigator; since the area parameters of the four sides are all parameters relative to the origin of the upper left corner, the calculation formulas are different when calculating the distances of the left side, the right side and the lower side. When calculating the left and right distances, the formula is similar, taking the left distance as an example: and the leftThumb-left/k width scale-thumbnail, wherein the leftThumb is the distance from the navigator node area to the left side of the navigator viewport, the left is the distance from the main map node area to the left side of the main map viewport, k is the zoom ratio obtained in 3.4 after the user actively zooms the main map, the width scale is the width zoom ratio calculated in 3.3, and the thumbnail is the secondary zoom ratio calculated in 1.5.1. The formula is similar when calculating the right and lower distances, taking the following distances as an example, the formula is: bottom/k height scale, height scale and tophumb, wherein bottom is the distance between a main map node area and the lower side of a main map view port, k is the zoom ratio obtained in 3.4 after a user actively zooms the main map, height scale is the height zoom ratio calculated in 3.3, height scale is the secondary zoom ratio calculated in 1.5.1, height is the height of a navigation map node area, and tophumb is the distance between a navigator node area and the upper side of a navigator view port.
And S306, calling a move method of the break component in the D3.Js according to the coordinates of the upper left vertex and the lower right vertex of the break area calculated in the S304, and setting the position and the size of the break area until the main graph is mapped to the navigator in real time.
Preferably, S300 is specifically operative to:
3.1 obtaining the viewport area parameter of the navigator by using a native js getBoundingClientRect () method, and then obtaining the four-side parameters of the main view port area, such as mainTop, mainLeft, mainRight and mainBottom, according to the main view port area parameter in 1.3, the navigator node area parameter in 1.5.1 and the main view node area parameter in 1.5.3, the four-side parameters of the main view port area, such as mainNodeTop, mainNodeLeft, mainNodeRight and mainNodeBottom, the upper and left-side parameters of the viewport area of the navigator, such as thynbTop and left-side parameters of the viewport area, and the upper and left-side parameters of the node area of the navigator, such as thynbNodeTop and left-side parameters of the viewport area.
3.2, according to the parameters obtained in 3.1, calculating the four-side distance between the main map node area and the main map viewport: an upper edge distance maintoppresent = mainnodtop-mainTop, a left edge distance mainLeftDistance = mainnodlet-mainlet, a right edge distance mainRightDistance = mainRight-mainnodedright, and a lower edge distance = mainBottom-mainnodobottom; calculating the distance between the navigator node region and the upper and left sides of the navigator viewport: the upper distance is thumbtpdestination = thumbNodeTop-thumbTop, and the left distance is thumbLeftDistance = thumbNodeLeft-thumblet.
3.3 Using the attr method of D3.Js, the main graph current zoom scale k is obtained, which is typically varied by the user actively performing a zoom operation.
3.4 according to the width zoom scale widthScale and the height zoom scale obtained in 1.3, the navigator node area width thumbnodeWidth obtained in 1.5.1, the navigator node area height thumbNodeHeight obtained in 1.5.3, the secondary zoom scale thumbScale obtained in 1.5.3, the four-side distances maintopDatanitance, mainLeftDistance, mainRightDistance, and mainBottomDistance of the main map node area distance from the main map viewport obtained in 3.1, the upper and left-side distances thrombTopDatistance, and the main map current zoom scale k obtained in 3.3, the upper left vertex coordinates and the lower right vertex coordinates of the brush area are calculated by using a formula. Note that the coordinates of the top left vertex are [ x1, y1], and the coordinates of the bottom right vertex are [ x2, y2], and the formula is as follows: x1= mail left distance/k width scale, y1= mail to scale, and height scale, x2= mail right distance/k width scale, mail to scale, and height scale, and y2= mail to scale, height scale, and height scale.
3.5 combining the top left and bottom right vertex coordinates calculated in 3.4 into a group format brushAlea = [ [ x1, y1], [ x2, y2] ] required for brush, calling the move method of the brush component, and transmitting the brushAlea, then the navigator brush will change correspondingly according to the movement, scaling and node movement of the main graph.
S400, calculating the position of the main graph node area relative to the viewport according to the position of the brush in the navigator, and realizing that the main graph viewport can always keep consistent with the brush area of the navigator when the brush in the navigator is moved.
In this embodiment, the specific method of S400 is as follows:
s401, acquiring the position of a break area in the navigator relative to a viewport of the navigator, namely acquiring a selection attribute of a break component through an event in D3.Js to acquire a two-dimensional array of coordinates of a top left vertex and a bottom right vertex of the break area.
S402, calculating a navigation map area covered by the break area according to the width and height scaling calculated in S102, the secondary scaling calculated in S105, the main map scaling when the user actively scales the main map acquired in S304 and the position of the break area relative to the viewport of the navigator acquired in S401, and mapping the transform offset and the scaling amount of the main map when the break area is mapped to the main map. Since the main SVG is assigned with the transform attribute of the SVG, only the x offset, the y offset and the scaling of the main SVG need to be calculated, the x offset and the y offset are similar, taking x offset as an example, the calculation formula is: (thombiarea/2 × (1-thombiscale) -brosharea [0] [0 ])/widthScale × k/thombiscale, where the zoom ratio is set to k, where thombiarea is the navigator region width, thumbScale is the quadratic zoom ratio calculated in 1.5.1, brosharea is the position of the brosharea region obtained in 4.1 relative to the navigator viewport, brosharea [0] [0] represents the x value of the upper left coordinate of brosharea, widthScale is the width zoom ratio calculated in 1.2, and k is the zoom ratio after the user actively zooms the main image obtained in 3.4.
And S403, according to the attribute of the event in the D3.Js, acquiring whether the current user operates the main graph or the navigator break, and judging the addition condition of the calculation formula in S305 and S402 according to the operation of the main graph or the break.
Preferably, S400 is specifically operative to:
on (' startflush end ', flushed '), the first parameter represents the flush action, and the second parameter represents the execution function when the flush action is performed. The monitoring method of the binding here is: when the brushing is started, the brushing is in progress, and the brushing is finished, the brushed method is called.
4.2 write 4.1 Brish method, when the target is to do the brushing action, the main graph will shift along with the brush of the navigator.
4.2.1 uses the selection attribute of the event in D3.Js to obtain the current region parameter of brush, which is written as brushAlea = [ [ x1, y1], [ x2, y2] ].
4.2.2 according to the width scaling ratio widthScale and the height scaling ratio heightScale calculated in 1.3, the quadratic scaling ratio thumbScale calculated in 1.5.3 and the main picture current scaling ratio k acquired in 3.3, calculating the offset of the main picture SVG through a formula, and adding the offset into the direct sub-element of the main picture SVG through an attr method of D3. Js. The specific adding method and formula are as follows: attr ('transform', 'translate ($ { -x1/width scale x k/thumbScale }, $ { -y1/height scale k/thumbScale }) scale ($ { k })').
4.2.3 according to the type attribute of the sourceEvent of the event in D3.Js, judging the type of the current operation event, taking the type as the basis, judging whether the user operation is the main picture shift/zoom or the break movement of the navigator, and adding condition judgment for the formulas in 3.4 and 4.2.2 to avoid the condition of dead loop.
S500, correcting the navigator according to the main map layout form. After steps S200-S500, the schematic diagram of the navigator effect is shown in fig. 3.
In this embodiment, the specific method of S500 is:
s501, dividing layout forms into two main categories of center alignment and upper left corner alignment, wherein the center alignment layout takes a central point of the navigator as a zoom origin. E.g., force directed graph layout, circular layout, etc., top left aligned layout having the top left vertex of the navigator as the zoom origin, e.g., tree layout, family layout, etc. And writing the layout form classification into a layout classification dictionary.
S502, adding a judgment condition for the calculation formula in 4.2, and if the current layout is a center-aligned layout, directly applying the calculation formula in 4.2; if the current layout is the layout with the aligned upper left corner, the calculation formula in 4.2 needs to be corrected, and the offset of the center of the coordinate system is removed. The x offset and y offset equations are similar, taking x offset as an example, the equation is: -brosharea [0] [0]/widthScale × k/thumbScale, where brosharea is the position of the brosharea region obtained in 4.1 relative to the navigator viewport, brosharea [0] [0] represents the x value of the upper left coordinate of brosharea, widthScale is the width scale calculated in 1.2, k is the scale after the user actively zooms the main image obtained in 3.4, and thumbScale is the quadratic scale calculated in 1.5.1.
Preferably, the specific operation method of S500 is:
5.1, dividing each layout form into two types of viewport center alignment and viewport origin alignment, wherein the reference point aligned with the viewport center is the center point of the navigator viewport, and the reference point aligned with the viewport origin is the vertex of the upper left corner of the navigator viewport. And establishing a layout classification dictionary layout dic according to the layout form classification. Taking force directed graph layout (force) and tree layout (tree) as examples, the dictionary format is layout dic = { force: ' center ', tree: ' vertex }.
And 5.2, inquiring the layout Dic dictionary to add judgment to the formula in 1.5.4, wherein if the layout is of a viewport origin alignment type, the formula does not need to be changed, and if the layout is of a viewport center alignment type, the reference coordinate offset needs to be added into the formula. According to the node viewport width thombwidth, the node viewport height thombwidth and the original attr method obtained in 1.3, the corrected attr method is as follows: attr (' transform ', ' translate ($ { thumbWidth/2 (1-thumbScale) }, $ { thumbHeight/2 (1-thumbScale) }) scale ($ { thumbScale })).
And 5.3, inquiring a layout Dic dictionary, adding judgment to the formula in 4.2.2, wherein if the layout is of a viewport origin alignment type, the formula does not need to be changed, and if the layout is of a viewport center alignment type, the reference coordinate offset needs to be added into the formula. According to the node viewport width thombwidth, the node viewport height thombwidth and the original attr method obtained in 1.3, the corrected attr method is as follows: attr ('transform', 'translate ({ (thumbWidth/2) ((1-thumbScale) -x 1)/widthScale) }, { (thumbHeight/2) ((1-thumbScale) -y 1)/height scale: } k/thumbScale) }) scale ($ { k })'.
And S600, correcting the content of the navigator by switching according to the layout form of the main map.
In this embodiment, the specific method of S600 is:
s601, dividing each layout form into two major categories of dynamic layout and static layout, wherein after the main map is loaded, the dynamic layout automatically performs inertial movement after a user drags the node. Such as force directed graphs, etc., static layouts do not automatically move, such as tree layouts, family layouts, ring layouts, etc. And writing the dynamic and static classification of the layout into a dynamic and static dictionary of the layout.
S602, when the main map is switched to be laid out, the dynamic and static dictionaries of the layout are inquired, and whether the stop is needed and the animation effect is not completed is judged.
Preferably, S600 is specifically operative to:
6.1, dividing each layout form into two categories of animation layout and static layout, wherein the animation layout refers to the layout that each element of a map can automatically move according to a certain rule after a page is loaded or the map is changed, such as a force-directed graph and the like, and the essence of the method is that a timer is started to perform multiple delayed drawing on SVG according to the rule after the operation of the map init or update is finished; the static layout refers to a layout in which each element of the map cannot move independently after page loading or map change, such as a tree diagram and the like, and the essence is that the map is drawn only once when the map init or update is operated, and the map is not changed if the map is not actively operated by a user after drawing is completed. If the layout before the layout change is an animation layout, if the timer is not actively stopped, the problem of the flickering or display error of the navigation chart occurs.
6.2 according to the classification in 6.1, a dynamic and static dictionary moveDic of layout is established, and by taking the force directed graph layout (force) and the tree layout (tree) as examples, the dictionary format is moveDic = { force: 'move', tree: 'static' }.
6.3, inquiring the moveDic dictionary, adding judgment in the graph resetting method, if the dynamic graph is obtained before resetting, calling a stop () method of a force component in D3.Js, and stopping a corresponding timer.
The invention discloses a method for realizing visualized mutual navigation of a knowledge graph, which provides a visualized mutual dynamic navigation graph for a person who checks and analyzes when checking the knowledge graph, compared with the traditional thumbnail, the method is more visualized, friendly and accurate in providing the size and position relation between the current viewport of a main graph and a whole graph, and can quickly position the main graph node to be checked in a navigator; especially for dynamic layout, the traditional thumbnail cannot reflect the dynamic change of the main graph in real time, and the invention can perfectly realize synchronous interaction with the main graph.
It should be understood that the specific order or hierarchy of steps in the processes disclosed is an example of exemplary approaches. Based upon design preferences, it is understood that the specific order or hierarchy of steps in the processes may be rearranged without departing from the scope of the present disclosure. The accompanying method claims present elements of the various steps in a sample order, and are not intended to be limited to the specific order or hierarchy presented.
In the foregoing detailed description, various features are grouped together in a single embodiment for the purpose of streamlining the disclosure. This method of disclosure is not to be interpreted as reflecting an intention that the claimed embodiments of the subject matter require more features than are expressly recited in each claim. Rather, as the following claims reflect, invention lies in less than all features of a single disclosed embodiment. Thus, the following claims are hereby expressly incorporated into the detailed description, with each claim standing on its own as a separate preferred embodiment of the invention.
Those of skill would further appreciate that the various illustrative logical blocks, modules, circuits, and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, computer software, or combinations of both. To clearly illustrate this interchangeability of hardware and software, various illustrative components, blocks, modules, circuits, and steps have been described above generally in terms of their functionality. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the overall system. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present disclosure.
The steps of a method or algorithm described in connection with the embodiments disclosed herein may be embodied directly in hardware, in a software module executed by a processor, or in a combination of the two. A software module may reside in RAM memory, flash memory, ROM memory, EPROM memory, EEPROM memory, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art. An exemplary storage medium is coupled to the processor such the processor can read information from, and write information to, the storage medium. Of course, the storage medium may also be integral to the processor. The processor and the storage medium may reside in an ASIC. The ASIC may reside in a user terminal. Of course, the processor and the storage medium may reside as discrete components in a user terminal.
For a software implementation, the techniques described herein may be implemented with modules (e.g., procedures, functions, and so on) that perform the functions described herein. The software codes may be stored in memory units and executed by processors. The memory unit may be implemented within the processor or external to the processor, in which case it can be communicatively coupled to the processor via various means as is known in the art.
What has been described above includes examples of one or more embodiments. It is, of course, not possible to describe every conceivable combination of components or methodologies for purposes of describing the aforementioned embodiments, but one of ordinary skill in the art may recognize that many further combinations and permutations of various embodiments are possible. Accordingly, the embodiments described herein are intended to embrace all such alterations, modifications and variations that fall within the scope of the appended claims. Furthermore, to the extent that the term "includes" is used in either the detailed description or the claims, such term is intended to be inclusive in a manner similar to the term "comprising" as "comprising" is interpreted when employed as a transitional word in a claim. Furthermore, any use of the term "or" in the specification of the claims is intended to mean a "non-exclusive or".
Claims (6)
1. A method for realizing interactive navigation of knowledge graph visualization is characterized by comprising the following steps:
s100, on the premise that the primary knowledge graph drawing method is written, drawing a synchronous dynamic navigation graph in a preset navigator;
s200, adding a brush layer to the navigator to display the position and the size of the current viewport of the main picture relative to the node area of the full picture;
s300, mapping the current visual area of the main map to a browser layer of the navigator, and changing the size and the position of the browser when the main map is moved, zoomed and dragged by nodes;
s400, calculating the position of the main graph node area relative to the viewport according to the position of the break in the navigator, and enabling the main graph viewport to be always consistent with the break area of the navigator when the break in the navigator is moved;
s500, correcting the navigator according to the layout form of the main map;
s600, switching according to the main map layout form, and correcting the content of the navigator;
wherein, the S100 specific method comprises the following steps:
s101, dynamically acquiring the size of a current main picture window according to different display resolutions and the size of a window reserved for a navigation map in a preset navigator;
s102, respectively calculating the width and height scaling ratios of the main map when the main map is mapped to the navigator according to the size of the obtained window;
s103, designing a navigation drawing method; the specific method of S103 is as follows: on the basis of the main map drawing method, the scaling obtained by calculation in the step S102 is transmitted, and when various widths, heights and image sizes are drawn, the scaling is added for calculation, so that the overall shape and animation of the navigation map are consistent with those of the main map, the navigation map is scaled only in proportion, and the character rendering of nodes and connecting lines is removed in the navigation map drawing method;
s104, after the method for loading the main graph is carried out, a method for drawing the navigation graph is introduced, the main graph and the navigator are guaranteed to be drawn simultaneously, and therefore when the main graph node is dragged, the navigation graph node is dragged synchronously;
s105, calculating a proportion to carry out secondary zooming on the navigation map according to the size of the whole map and the size of the view port of the navigator, and ensuring that the whole map is displayed in the view port of the navigator; the specific method of S105 is as follows:
s1051, calculating the proportion of secondary zooming of a navigator according to the current position size of a node area of a navigation map relative to a viewport of the navigation map; if the node area exceeds the viewport, carrying out secondary zooming, and if the node area does not exceed the viewport, not carrying out secondary zooming;
s1052, calculating the center coordinate of the SVG coordinate area of the navigator according to the secondary scaling calculated in the S1051 and the width and height of the viewport of the navigator;
and S1053, combining a transform attribute according to the secondary zoom scale calculated in S1051 and the SVG center coordinate calculated in S1052, and adding the transform attribute into the node attribute of the navigator so as to zoom by taking the center of the navigator as a reference when the node area exceeds the viewport, wherein the zoom result is that the node area is just inside the window of the navigator and has a gap from a border.
2. The method for realizing knowledge-graph visualization interactive navigation according to claim 1, wherein the specific method of S200 is as follows:
s201, when the navigator is loaded, giving a brush layer to the navigator SVG through a brush component of D3.Js according to preset coordinate variables of upper left vertex and lower right vertex of a brush area;
s202, mouse interaction operation of a brush frame and a background is forbidden by using a pointer-events attribute of the CSS, so that a user can only drag the brush area.
3. The method for realizing knowledge-graph visualization interactive navigation according to claim 1, wherein the specific method of S300 is as follows:
s301, obtaining area parameters of a main map node area, a main map view port area, a navigator node area and a navigator view port area;
s302, calculating the upper, lower, left and right distances between the main map node area and the viewport area and calculating the upper and left distances between the navigator node area and the viewport area according to the area parameters obtained in S301;
s303, calculating the width and height scaling ratios of the main map and the navigation map by using the width and the height respectively according to the area parameters acquired in the S301;
s304, when a user actively zooms the main picture, obtaining the zoom ratio of the actively zoomed main picture;
s305, calculating coordinates of top left and bottom right vertexes of the brush area according to the distances and the scaling ratios acquired in S302 and S303, namely the top, bottom, left and right distances between the brush area and a viewport area of the navigator;
and S305, calling a move method of the break component in the D3.Js according to the coordinates of the upper left vertex and the lower right vertex of the break area calculated in the S304, and setting the position and the size of the break area until the main graph is mapped to the navigator in real time.
4. The method for realizing knowledge-graph visualization interactive navigation according to claim 3, wherein the specific method of S400 is as follows:
s401, acquiring the position of a brush area in the navigator relative to a viewport of the navigator, namely acquiring a selection attribute of a brush component through an event in D3.Js to acquire two-dimensional arrays of coordinates of upper left and lower right vertexes of the brush area;
s402, calculating a navigation map area covered by the break area through a formula according to the width and height scaling calculated in S102, the secondary scaling calculated in S105, the main map scaling obtained in S304 when the user actively scales the main map and the position of the break area obtained in S401 relative to a viewport of a navigator, and mapping the transform offset and the scaling quantity of the main map when the break area is mapped to the main map;
and S403, according to the attribute of the event in the D3.Js, acquiring whether the current user operates the main graph or the navigator break, and adding condition judgment for the calculation formulas in S305 and S402 according to the operation of the current user on the main graph or the break.
5. The method for realizing knowledge-graph visualization interactive navigation according to claim 4, wherein the specific method of S500 is as follows:
s501, dividing layout forms into two main categories of center alignment and upper left corner alignment, wherein the center alignment layout takes a central point of a navigator as a zoom origin
S502, adding a judgment condition for the calculation formula in S402, and if the current layout is a center-aligned layout, directly applying the calculation formula in S402; if the current layout is a layout with the upper left corner aligned, the calculation formula in S402 needs to be corrected, and the coordinate system center offset is removed.
6. The method for realizing knowledge-graph visualization interactive navigation according to claim 1, wherein the specific method of S600 is as follows:
s601, dividing each layout form into two major categories of dynamic layout and static layout, wherein after the main map is loaded, the dynamic layout automatically performs inertial movement after a user drags the node
S602, when the main graph is switched to be distributed, inquiring a dynamic and static dictionary of the distribution, and judging whether the stop is needed and the animation effect is not completed.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011428870.0A CN112380357B (en) | 2020-12-09 | 2020-12-09 | Method for realizing interactive navigation of knowledge graph visualization |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011428870.0A CN112380357B (en) | 2020-12-09 | 2020-12-09 | Method for realizing interactive navigation of knowledge graph visualization |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112380357A CN112380357A (en) | 2021-02-19 |
| CN112380357B true CN112380357B (en) | 2022-11-01 |
Family
ID=74590638
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011428870.0A Active CN112380357B (en) | 2020-12-09 | 2020-12-09 | Method for realizing interactive navigation of knowledge graph visualization |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112380357B (en) |
Families Citing this family (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113804200B (en) * | 2021-04-12 | 2023-12-29 | 之江实验室 | Visual language navigation system and method based on dynamic enhanced instruction attack module |
| CN114153350B (en) * | 2021-12-06 | 2023-09-29 | 北京金堤科技有限公司 | Map scaling method and device, storage medium and electronic equipment |
| CN114265526B (en) * | 2021-12-10 | 2023-07-28 | 北京金堤科技有限公司 | Map scaling method and device, storage medium and electronic equipment |
| CN114706508B (en) * | 2022-04-28 | 2024-06-14 | 山东亿云信息技术有限公司 | Canvas enlarging and shrinking offset control method of WEB end and canvas redrawing method |
| CN115630698B (en) * | 2022-12-08 | 2023-04-11 | 国家电网有限公司客户服务中心 | Knowledge graph visualization method and device based on force guide graph and electronic equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2011155929A1 (en) * | 2010-06-09 | 2011-12-15 | Tele Atlas North America Inc. | Systems and methods for processing information related to a geographic region |
| WO2017123163A1 (en) * | 2016-01-17 | 2017-07-20 | Nextgen Shopping Pte Ltd | Improvements in or relating to the generation of three dimensional geometries of an object |
| EP3217267A1 (en) * | 2016-03-07 | 2017-09-13 | Facebook, Inc. | Systems and methods for presenting content |
| CN107291802A (en) * | 2017-05-12 | 2017-10-24 | 北京金堤科技有限公司 | Relation map methods of exhibiting and device |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10380140B2 (en) * | 2015-11-30 | 2019-08-13 | Tableau Software, Inc. | Systems and methods for implementing a virtual machine for interactive visual analysis |
| CN111339316A (en) * | 2020-02-27 | 2020-06-26 | 河海大学 | Method and system architecture for realizing visual editing and persistence of knowledge graph |
-
2020
- 2020-12-09 CN CN202011428870.0A patent/CN112380357B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2011155929A1 (en) * | 2010-06-09 | 2011-12-15 | Tele Atlas North America Inc. | Systems and methods for processing information related to a geographic region |
| WO2017123163A1 (en) * | 2016-01-17 | 2017-07-20 | Nextgen Shopping Pte Ltd | Improvements in or relating to the generation of three dimensional geometries of an object |
| EP3217267A1 (en) * | 2016-03-07 | 2017-09-13 | Facebook, Inc. | Systems and methods for presenting content |
| CN107291802A (en) * | 2017-05-12 | 2017-10-24 | 北京金堤科技有限公司 | Relation map methods of exhibiting and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112380357A (en) | 2021-02-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112380357B (en) | Method for realizing interactive navigation of knowledge graph visualization | |
| US10528236B2 (en) | Creating a display pattern for multiple data-bound graphic objects | |
| US7650565B2 (en) | Method for managing annotations in a computer-aided design drawing | |
| US20080180439A1 (en) | Reducing occlusions in oblique views | |
| CN101908202B (en) | Method for fast displaying electronic chart | |
| US8294710B2 (en) | Extensible map with pluggable modes | |
| Wu et al. | ViSizer: a visualization resizing framework | |
| JP2005293552A (en) | Grid canvas | |
| JP2009534724A (en) | Position indicating method and position indicating device | |
| CN103208225A (en) | Tile map manufacturing method and system | |
| US10613725B2 (en) | Fixing spaced relationships between graphic objects | |
| CN109859109B (en) | Series scale PDF map seamless organization and display method | |
| US7453474B2 (en) | Flexibly resizeable vector graphics | |
| US20160132215A1 (en) | Alternative People Charting for Organizational Charts | |
| JP2014512597A (en) | 3D viewing method | |
| CN112100795A (en) | Method and device for comparing computer aided design drawings | |
| CN109871206A (en) | View method, apparatus, equipment and the readable storage medium storing program for executing of JSON tree | |
| US10475223B2 (en) | Generating multiple data-bound graphic objects | |
| US10169734B2 (en) | Dynamic layout for organizational charts | |
| CN111580729B (en) | Processing method and system for selecting overlapped graphics primitives, readable storage medium and electronic equipment | |
| EP2012275B1 (en) | Design support system, method and program | |
| JP5245444B2 (en) | Information display device and program | |
| CN113096217B (en) | Picture generation method and device, electronic equipment and storage medium | |
| CN102592261B (en) | Vector diagram showing method and system | |
| KR20230145478A (en) | Display update method and device for linking multiple terminals |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |