CN112380357A - Method for realizing interactive navigation of knowledge graph visualization - Google Patents
Method for realizing interactive navigation of knowledge graph visualization Download PDFInfo
- Publication number
- CN112380357A CN112380357A CN202011428870.0A CN202011428870A CN112380357A CN 112380357 A CN112380357 A CN 112380357A CN 202011428870 A CN202011428870 A CN 202011428870A CN 112380357 A CN112380357 A CN 112380357A
- Authority
- CN
- China
- Prior art keywords
- navigator
- main
- area
- map
- graph
- 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.)
- Granted
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 realization of 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 map (Knowledge Graph) is a series of different graphs displaying Knowledge development process and structure relationship in the book intelligence field, describing Knowledge resources and carriers thereof by using visualization technology, mining, analyzing, constructing, drawing and displaying Knowledge and mutual relation between Knowledge resources and Knowledge 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 interactive navigable realization of knowledge-graph visualization 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 graph window and the size of a window reserved for a navigation graph in a preset navigator according to different display resolutions;
s102, respectively calculating the width and height scaling ratios of the main graph when the main graph 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 in the navigator window and has a gap from a frame;
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 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;
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, obtaining the position of a brush area in the navigator relative to a viewport of the navigator, namely obtaining a selection attribute of a brush component through an event in D3.js so as to obtain 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 according to a formula and a transform offset and a zoom amount of the main map when the break area is mapped to the main map according to the width and the height zoom ratios calculated in S102, the secondary zoom ratio calculated in S105, the main map zoom ratio when the user actively zooms the main map acquired in S304 and the position of the break area relative to the viewport of the navigator acquired in S401;
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 a central point of a navigator as a zoom origin
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 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.
The technical scheme provided by the embodiment of the invention has the beneficial effects that at least:
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.
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 graph window and the size of a window reserved for a navigation graph in a preset navigator according to different display resolutions;
s102, respectively calculating the width and height scaling ratios of the main graph when the main graph 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 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. 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 needs to be subtracted on the basis of the final calculation result to obtain a more friendly visual effect.
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 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 secondary zoom, the redrawing interval can be set by setting a counter 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 main graph and the width and the height of the navigator, the width proportion width scale is calculated as the height width/main width, and the height proportion height scale is calculated as the height/main height.
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 area of the preliminary navigation graph node is wider or higher than the viewport of the navigator, carrying out secondary zooming on the navigation graph.
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. According to the area width and height of the navigator node and the view port width and height of the navigator obtained in 1.3, the width difference between the height difference and the height difference is calculated.
1.5.2 calculating the smaller of width difference and height difference, marking as minDifference, and judging whether the minDifference is more than 0. If the value is larger than 0, the node area can be completely positioned in the viewport, so secondary zooming is not needed, the secondary zooming ratio thumbScale can be directly set as 1, and the step of 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 image node region by using a getBoundingClientRect () method of the native js, and obtaining the width of the current main image node region mainNodeWidth and the height of the main image node region mainNodeHeight. Note that the preliminary secondary scaling is tempThumbScale, if the width difference is small, tempThumbScale is mainWidth/mainnodefith, and if the height difference is small, tempThumbScale is mainHeight/mainnodoheight. From the viewpoint of page beauty and friendliness, the node region should be slightly spaced from the viewport region, so the final second-zoom scale "tempthumb scale-0.1".
1.5.4 obtains the elements in the SVG of the navigation map, including nodes, links, node characters, node images, link characters, etc., using the select method of D3.js, and adding the scaling to the elements using the attr method of D3.js and the transform attribute of SVG, attr (' transform ', ' transform (0,0) scale ($ { thumbscal) for).
1.5.5 this step is optional, because the navigation map size does not need to be scaled twice often, so can be 1.5.4 secondary scaling method joins in the counter, according to needs to set up the main graph every n changes, carries out the navigation map secondary scaling method.
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.
In this embodiment, 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. 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 brush method variable by the g element variable, and calling a move method of the brush to endow the initial area of the brush.
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 map is mapped to a browser layer of the navigator, and the navigator browser can change the corresponding size and position when the main map moves, zooms and drags nodes.
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 brush component in the D3.js according to the coordinates of the upper left vertex and the lower 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.
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 mainTopDistance is mainNodeTop-mainTop, a left edge distance mainNodeLeft-mainlet, a right edge distance is mainRight-mainnodeleght, and a lower edge distance is mainBottom-mainNodeBottom; calculating the distance between the navigator node area and the upper and left sides of the navigator viewport: the upper side distance "tsumbtopdistance" is "tsumbnodetop-tsumbtop", and the left side distance "tsumbleftdistance" tsumbnodeft-tsumbleft ".
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. Let the coordinates of the top left vertex be [ x1, y1], and the coordinates of the bottom right vertex be [ x2, y2], and the formula is as follows: x1 ═ mail distance/k ═ width scale ═ y1 ═ phosphor scale ═ mail to phosphor scale ═ height scale ═ thickness scale ═ height scale ═ thickness scale ═ height scale: + height node width + height let distance, y 6335 ═ mail bottom distance/k height dimension: + height node height + height scale.
3.5 combine the top left and bottom right vertex coordinates calculated in 3.4 into a brush required array format brushArea [ [ x1, y1], [ x2, y2] ], call the move method of the brush component, and introduce the brush, so 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, obtaining the position of a brush area in the navigator relative to a viewport of the navigator, namely obtaining a selection attribute of a brush component through an event in D3.js so as to obtain 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 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, during the brushing, and when the brushing is finished, the method of broshed is called.
4.2 write the method of broshed in 4.1, when the target is to do the brushing action, the main graph shifts along with the brosh 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 brushArea [ [ 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/widthScale k/thumbScale }, $ -y1/height Scale k/thumbScale }) scale ($ k })').
4.2.3 according to the type attribute of 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 main image shift/zoom or the brush movement of the navigator, and adding condition judgment for the formulas in 3.4 and 4.2.2 to avoid the condition of dead cycle.
S500, correcting the navigator according to the layout form of the main pattern. After steps S200-S500, the schematic diagram of the effect of the navigator 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 a reference point of the viewport center alignment is a central point of the navigator viewport, and a reference point of the viewport origin alignment is an upper left vertex of the navigator viewport. And establishing a layout classification dictionary layout dic according to the layout form classification. Taking the force directed graph layout (force) and the tree layout (tree) as examples, the dictionary format is layout dic ═ force: 'center', tree: 'vertex'.
And 5.2, inquiring a layout Dic dictionary to add judgment to a formula in 1.5.4, wherein if the layout is of a viewport origin alignment class, the formula does not need to be changed, and if the layout is of a viewport center alignment class, 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 class, the formula does not need to be changed, and if the layout is of a viewport center alignment class, 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', ($ { (thombwidth/2: (1-thombscale) -x 1)/widthScale:. k/thombscale }, $ { (thombheight/2: (1-thombscale) -y1)/height scale:. k/thombscale }) 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 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.
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, taking force directed graph layout (force) and tree layout (tree) as examples, and the dictionary format is moveDic ═ force: 'move', tree: 'static' }.
6.3 inquiring the moveDic dictionary, adding judgment in the map resetting method, if the dynamic map is obtained before resetting, calling the stop () method of the force component in D3.js, and stopping the 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 (9)
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, 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.
2. The method for realizing knowledge-graph visualization interactive navigation according to claim 1, wherein the S100 specific method comprises the following steps:
s101, dynamically acquiring the size of a current main graph window and the size of a window reserved for a navigation graph in a preset navigator according to different display resolutions;
s102, respectively calculating the width and height scaling ratios of the main graph when the main graph 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.
3. The method for realizing knowledge-graph visualization interactive navigation according to claim 2, wherein the specific method of S103 is as follows: 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.
4. The method for realizing knowledge-graph visualization interactive navigation according to claim 1, wherein 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 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.
5. 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.
6. 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 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;
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.
7. The method for realizing knowledge-graph visualization interactive navigation according to claim 6, 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 according to a formula and a transform offset and a zoom amount of the main map when the break area is mapped to the main map according to the width and the height zoom ratios calculated in S102, the secondary zoom ratio calculated in S105, the main map zoom ratio when the user actively zooms the main map acquired in S304 and the position of the break area relative to the viewport of the navigator acquired in S401;
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.
8. The method for realizing knowledge-graph visualization interactive navigation according to claim 7, 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 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.
9. 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 true CN112380357A (en) | 2021-02-19 |
| CN112380357B 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) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113804200A (en) * | 2021-04-12 | 2021-12-17 | 之江实验室 | Visual language navigation system and method based on dynamic reinforced instruction attack module |
| CN114153350A (en) * | 2021-12-06 | 2022-03-08 | 北京金堤科技有限公司 | Map scaling method and device, storage medium and electronic equipment |
| CN114265526A (en) * | 2021-12-10 | 2022-04-01 | 北京金堤科技有限公司 | Map scaling method and device, storage medium and electronic equipment |
| CN114706508A (en) * | 2022-04-28 | 2022-07-05 | 山东亿云信息技术有限公司 | Canvas amplification and reduction offset control method and canvas redrawing method for WEB side |
| CN115630698A (en) * | 2022-12-08 | 2023-01-20 | 国家电网有限公司客户服务中心 | Knowledge graph visualization method and device based on force guide graph and electronic equipment |
Citations (6)
| 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 |
| US20170154089A1 (en) * | 2015-11-30 | 2017-06-01 | Tableau Software, Inc. | Systems and Methods for Implementing A Virtual Machine for Interactive Visual Analysis |
| 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 |
| 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 (6)
| 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 |
| US20170154089A1 (en) * | 2015-11-30 | 2017-06-01 | Tableau Software, Inc. | Systems and Methods for Implementing A Virtual Machine for Interactive Visual Analysis |
| 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 |
| CN111339316A (en) * | 2020-02-27 | 2020-06-26 | 河海大学 | Method and system architecture for realizing visual editing and persistence of knowledge graph |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113804200A (en) * | 2021-04-12 | 2021-12-17 | 之江实验室 | Visual language navigation system and method based on dynamic reinforced instruction attack module |
| CN113804200B (en) * | 2021-04-12 | 2023-12-29 | 之江实验室 | Visual language navigation system and method based on dynamic enhanced instruction attack module |
| CN114153350A (en) * | 2021-12-06 | 2022-03-08 | 北京金堤科技有限公司 | Map scaling method and device, storage medium and electronic equipment |
| CN114153350B (en) * | 2021-12-06 | 2023-09-29 | 北京金堤科技有限公司 | Map scaling method and device, storage medium and electronic equipment |
| CN114265526A (en) * | 2021-12-10 | 2022-04-01 | 北京金堤科技有限公司 | Map scaling method and device, storage medium and electronic equipment |
| CN114706508A (en) * | 2022-04-28 | 2022-07-05 | 山东亿云信息技术有限公司 | Canvas amplification and reduction offset control method and canvas redrawing method for WEB side |
| CN115630698A (en) * | 2022-12-08 | 2023-01-20 | 国家电网有限公司客户服务中心 | Knowledge graph visualization method and device based on force guide graph and electronic equipment |
| CN115630698B (en) * | 2022-12-08 | 2023-04-11 | 国家电网有限公司客户服务中心 | Knowledge graph visualization method and device based on force guide graph and electronic equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112380357B (en) | 2022-11-01 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112380357B (en) | Method for realizing interactive navigation of knowledge graph visualization | |
| CN102356375B (en) | Smooth layout animation of continuous and non-continuous properties | |
| CN110377285B (en) | Method and device for generating page skeleton screen and computer equipment | |
| US8253736B2 (en) | Reducing occlusions in oblique views | |
| US9418068B2 (en) | Dimensional conversion in presentations | |
| US20020027555A1 (en) | Method of rendering motion blur image and apparatus therefor | |
| US20120229501A1 (en) | Method and a Computer System for Displaying and Selecting Images | |
| Wu et al. | ViSizer: a visualization resizing framework | |
| JP2005293552A (en) | Grid canvas | |
| US20100302236A1 (en) | Extensible map with pluggable modes | |
| JP2009534724A (en) | Position indicating method and position indicating device | |
| US10565560B2 (en) | Alternative people charting for organizational charts | |
| CN101908202A (en) | Method for fast displaying electronic chart | |
| CN110832456B (en) | Creating default layout constraints for a graphical interface | |
| CN110428504B (en) | Text image synthesis method, apparatus, computer device and storage medium | |
| JP2014512597A (en) | 3D viewing method | |
| CN112100795A (en) | Method and device for comparing computer aided design drawings | |
| US7453474B2 (en) | Flexibly resizeable vector graphics | |
| JP7114049B2 (en) | Image processing device and image processing program | |
| US10169734B2 (en) | Dynamic layout for organizational charts | |
| KR20230145478A (en) | Display update method and device for linking multiple terminals | |
| CN113096217B (en) | Picture generation method and device, electronic equipment and storage medium | |
| JP2009193308A (en) | Information display device and program | |
| JP3615660B2 (en) | Image display apparatus and method | |
| JP2001283242A (en) | Image processor and image processing method |
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 |