CN111274308A - Node relation graph display method, device and equipment - Google Patents
Node relation graph display method, device and equipment Download PDFInfo
- Publication number
- CN111274308A CN111274308A CN202010053596.7A CN202010053596A CN111274308A CN 111274308 A CN111274308 A CN 111274308A CN 202010053596 A CN202010053596 A CN 202010053596A CN 111274308 A CN111274308 A CN 111274308A
- Authority
- CN
- China
- Prior art keywords
- data
- node
- server
- relation graph
- database
- 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.)
- Pending
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/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/26—Visual data mining; Browsing structured data
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
Abstract
The application discloses a display method of a node relation graph, which only requests basic data of a node at the beginning, performs visual display on the basic data after receiving the basic data, simultaneously requests all data of the node, and further stores all the data into a local database so as to perform visual display on corresponding node data when a subsequent user wants to check detailed information. Therefore, the method can not display all the contents of the relational graph at one time, the initial relational graph only displays the basic information of the nodes, partial node data which a user wants to view is displayed in the subsequent process, rendering resources can be saved under the scene of large-batch nodes, the problem that the resource consumption is large due to frequent data request is avoided, and the problem that the request delay is large due to the fact that the data is requested only when the user operates the relational graph is also avoided. In addition, the application also provides a node relation graph display device, equipment and a readable storage medium, and the technical effect of the node relation graph display device corresponds to that of the method.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a readable storage medium for displaying a node relationship graph.
Background
At present, more and more web pages use visual graphics to show the relationship between data, and based on the development of current big data, more and more data need to be shown. Under the scene of large-batch data display, the request and display of the visual graph become difficult, so that the problems of slow request, instable rendering of the visual graph and the like are caused.
The current relational diagram display scheme includes two technical directions, a load-by-load and an operation load. The successive loading method includes loading a part of node data when the node data is loaded for the first time, rendering the node data first, then requesting the server side to load the rest part of data successively, and rendering an interface once every time a part of data is requested. The operation loading method is that when the data is loaded for the first time, a part of node data is loaded and rendered, and then the server is requested to acquire corresponding data according to the operation of a user on an interface.
Although the successive loading method achieves the purpose of not loading all data nodes at one time, and avoids long time consumption of requests and instable rendering, the successive loading method still causes loss of request resources due to the fact that the requests are divided into multiple times, and the loading time is long. The operation loading method also achieves the purpose of not loading all data at one time, but the method only requests corresponding data when the user operates, and because the request of the data needs time, the method also needs to wait for the server to return the data after the operation is completed every time, and if the network speed is poor, obvious delay is caused.
Therefore, in the scene of a large number of nodes, the current relational graph display scheme can load all data through multiple requests, so that large request resources are consumed, or corresponding data are loaded only when a user requests, so that request delay is high.
Disclosure of Invention
The application aims to provide a node relation graph display method, a node relation graph display device and a readable storage medium, which are used for solving the problems that a current relation graph display scheme consumes large request resources or has high request delay under the condition of a large number of nodes. The specific scheme is as follows:
in a first aspect, the present application provides a method for displaying a node relationship graph, which is applied to a client, and includes:
sending a basic data acquisition request to a server according to the opening operation of the node relation graph;
receiving basic data of the node returned by the server according to the basic data acquisition request;
rendering a node relation graph according to the basic data by using a visual graphic plug-in, and sending all data acquisition requests to the server;
receiving all data of the nodes returned by the server according to the all data acquisition requests, and storing the all data into a local database;
and according to the viewing operation of the node relation graph, carrying out visual display on the corresponding node data stored in the local database by using a visual graphic plug-in.
Preferably, before the receiving the basic data of the node returned by the server according to the basic data obtaining request, the method further includes:
and the server acquires a request according to the basic data, converts the basic data of the node into a json format and sends the json format to the client.
Preferably, the visually displaying, by using a visual graph plug-in, the corresponding node data stored in the local database according to the viewing operation on the node relationship graph includes:
determining identification information of a target node according to the viewing operation of the node relation graph;
acquiring all data of the target node from the local database by using a javascript script according to the identification information;
and carrying out visual display on all data of the target node by using a visual graphic plug-in.
Preferably, the storing all the data to a local database includes:
and storing all the data into a local indexedDB database or a localStorage database.
Preferably, the storing all the data in a local indexedDB database or localStorage database includes:
judging whether the local support is the indexedDB database;
if yes, storing all the data to a local indexedDB database;
and if not, storing all the data into a local localStorage database.
Preferably, the receiving all the data of the node returned by the server according to the all the data obtaining request and storing the all the data in a local database includes:
receiving all data of the nodes returned by the server according to the all data acquisition request and the version numbers of the all data, and storing the all data and the version numbers to a local database;
and when a preset refreshing condition is reached, sending a refreshing request carrying the version number to the server, so that the server sends all the data of the nodes to the client again when the version number of the server is different from the version number sent by the server.
Preferably, the preset refresh condition includes: and detecting a refreshing operation on the node relation graph and/or detecting an opening operation on the node relation graph again.
In a second aspect, the present application provides a display apparatus of a node relationship graph, which is applied to a client, and includes:
a first request module: the basic data acquisition request is sent to the server according to the opening operation of the node relation graph;
a first receiving module: the basic data of the nodes returned by the server according to the basic data acquisition request is received;
a second request module: the node relation graph is rendered according to the basic data by utilizing a visual graphic plug-in, and all data acquisition requests are sent to the server;
a second receiving module: the data acquisition server is used for receiving all data of the nodes returned by the server according to the all data acquisition requests and storing the all data into a local database;
a detail display module: and the node relation graph display module is used for carrying out visual display on corresponding node data stored in the local database by utilizing a visual graphic plug-in according to the viewing operation of the node relation graph.
In a third aspect, the present application provides a display device of a node relationship diagram, including:
a memory: for storing a computer program;
a processor: for executing the computer program to implement the steps of the display method of the node relationship diagram as described above.
In a fourth aspect, the present application provides a readable storage medium having stored thereon a computer program for implementing the steps of the method for displaying a node relationship graph as described above when executed by a processor.
The method for displaying the node relation graph is applied to a client and comprises the following steps: sending a basic data acquisition request to a server according to the opening operation of the node relation graph; receiving basic data of the nodes returned by the server according to the basic data acquisition request; rendering a node relation graph according to the basic data by using a visual graphic plug-in, and sending all data acquisition requests to a server; receiving all data of the nodes returned by the server according to all data acquisition requests, and storing all the data to a local database; and according to the viewing operation of the node relation graph, carrying out visual display on the corresponding node data stored in the local database by using a visual graphic plug-in.
Therefore, the problems that the request for loading the visual graphic data is slow and the rendering is unsmooth under the condition of a large amount of data nodes are solved. The method only requests basic data of the nodes at the beginning, visually displays the basic data after receiving the basic data returned by the server, simultaneously requests all data of the nodes from the server, and further stores all the data returned by the server to a local database, so that corresponding node data can be visually displayed when a subsequent user wants to check detailed information. Therefore, under the scene of large-batch nodes, the method can load data in a smooth mode, the problem of larger resource consumption caused by frequently requesting the data from the server is avoided, the problem of larger request delay caused by requesting the data from the server only when a user operates the server is also avoided, the request resource is saved, and the delay is reduced. In addition, the method can not display all contents of the relational graph at one time, the initial relational graph only displays basic information of the nodes, partial node data which a user wants to view is displayed in the subsequent process, and rendering resources are saved.
In addition, the application also provides a node relation graph display device, equipment and a readable storage medium, and the technical effect of the node relation graph display device corresponds to the technical effect of the method, and the details are not repeated here.
Drawings
For a clearer explanation of the embodiments or technical solutions of the prior art of the present application, the drawings needed for the description of the embodiments or prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
Fig. 1 is a flowchart illustrating a first implementation of a method for displaying a node relationship diagram according to an embodiment of the present disclosure;
fig. 2 is a flowchart illustrating an implementation of a second method for displaying a node relationship diagram according to the present application;
fig. 3 is a flowchart illustrating a third implementation of a method for displaying a node relationship diagram according to the present application;
FIG. 4 is a functional block diagram of an embodiment of a display device of a node relationship diagram provided in the present application;
fig. 5 is a schematic structural diagram of an embodiment of a display device of a node relationship diagram provided in the present application.
Detailed Description
The core of the application is to provide a node relation graph display method, device, equipment and readable storage medium, so that the purpose of displaying the node relation graph in a smooth mode under the scene of a large number of nodes is achieved, the consumption of request resources and rendering resources is reduced, and the request delay is also reduced.
In order that those skilled in the art will better understand the disclosure, the following detailed description will be given with reference to the accompanying drawings. It is to be understood that the embodiments described are only a few embodiments of the present application and not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
Referring to fig. 1, a first embodiment of a node relationship diagram display method provided in the present application is applied to a client, and the first embodiment includes:
s101, sending a basic data acquisition request to a server according to the opening operation of the node relation graph;
s102, receiving basic data of the node returned by the server according to the basic data acquisition request;
s103, rendering a node relation graph according to the basic data by using a visual graphic plug-in, and sending all data acquisition requests to the server;
s104, receiving all data of the nodes returned by the server according to the all data acquisition request, and storing the all data to a local database;
and S105, carrying out visual display on the corresponding node data stored in the local database by using a visual graphic plug-in according to the viewing operation of the node relation graph.
The embodiment is implemented based on a client, and in practical application, the client is used for responding to user operation to obtain node data from a server, and visually displaying the node data to obtain a node relation graph. The visualization is the visual interpretation of data through presentation, modeling, and display of stereo, surface, attributes, and animations using graphics, image processing, computer vision, and user interfaces.
Specifically, in the present embodiment, node data is loaded twice, the first time is when an opening operation of a user on a node relationship graph is detected, for example, when the user is detected to open a D3-based visual graph website, a client sends a basic data acquisition request to a server, so as to achieve a purpose of loading basic data; and the second time, after the client receives the basic data returned by the server, the client sends all data acquisition requests to the server, so that the aim of loading all data is fulfilled.
It should be noted that the basic data of a node in this embodiment includes identification information of the node and a relationship between the node and another node, and all data of the node includes the basic data, and further includes detailed data of the node, such as node attribute information. For example, assuming that all data is personal information of all students in a class, including name, identification card, home address, school, relationship, personal experience, etc. of each student, the basic data is the data that needs to be displayed at the beginning, such as name, i.e. the relationship graph needs to display the names of all students in the class at the beginning, and the other data of the students is the detailed data.
In order to reduce the pressure of the client, as a preferred embodiment, after the server receives a basic data acquisition request or a whole data acquisition request sent by the client, the server first reads the basic data or the whole data of the node from the database on the server side, then converts the basic data or the whole data into a json format, and finally sends the basic data or the whole data of the json format to the client. Wherein the json format is a key-value pair type data format.
After the client receives the basic Data returned by the server, the client renders a node relationship graph according to the basic Data by using a visualization graphic plug-in, for example, visually displaying the basic Data by using d3(Data-drive Documents), where d3 is also called d3.js, which is a javascript library and can convert some Data into a graphic form for displaying.
After the client receives all the data returned by the server, the client stores all the data in the local database, and in practical application, the client can use localsterog or indendeddb to perform related storage operation on all the data returned by the server. Among them, localsteroge is a function of storing data locally in a browser, which allows a user to store data locally in the form of key-value pairs, and data is not lost when the browser is closed. While IndexedDb is a browser local storage transactional database that functions similarly to localStroge and also serves to store data, its object repository, request, transactional, asynchronous, etc. properties make it more suitable for storing large amounts of complex data.
After all data are stored in the local database, if the condition that a user requests to view detailed information of the node relation graph is detected, the server does not need to be requested again, and corresponding node data can be directly obtained from the local database. For example, a node which a user wants to view is determined according to user operation, identification information of a target node is determined, and all data of the target node are read from a local database according to the identification information so as to be displayed visually.
In the method for displaying the node relationship graph, only basic data of a node is requested initially, the basic data is visually displayed after being received, all data of the node is requested at the same time, and all data is stored in a local database, so that a subsequent user can visually display corresponding node data when the user wants to view detailed information. Therefore, the method can not display all the contents of the relational graph at one time, the initial relational graph only displays the basic information of the nodes, partial node data which a user wants to view is displayed in the subsequent process, rendering resources are saved under the scene of large-batch nodes, the problem that the resource consumption is large due to frequent data request is avoided, and the problem that the request delay is large due to the fact that the data is requested only when the user operates the relational graph is also avoided.
The second embodiment of the node relationship graph display method provided by the present application is described in detail below, and is implemented based on the first embodiment and is expanded to a certain extent based on the first embodiment.
Referring to fig. 2, an embodiment includes the following steps:
s201, a client sends a basic data acquisition request to a server according to the opening operation of a node relation graph;
s202, the server obtains a request according to the basic data, and converts the basic data of the node into a json format to send to the client;
the specific implementation method for acquiring the basic information of all the nodes by the server is that all the node data are acquired from the database by specifying database statements, the node data are traversed, the basic information of each node is acquired, the basic information is uniformly stored in json type data, and the data are returned to the client.
S203, the client receives basic data of the node returned by the server according to the basic data acquisition request;
s204, rendering a node relation graph by the client according to the basic data by using a visual graphic plug-in, and sending all data acquisition requests to the server;
specifically, the client acquires basic data returned by the server, converts the basic data into a data format required by visual display through methods such as a force layout method d3.force layout, d3.force, d3.tree and the like, and then renders a relational graph.
In practical applications, the basic data obtaining request and the entire data obtaining request may be ajax requests.
S205, the server converts all data of the nodes into json format according to all the data acquisition requests so as to send the json format to the client;
s206, the client receives all data of the nodes returned by the server according to the all data acquisition requests, and stores the all data to a local indexedDB database or localStorage database;
specifically, whether the local support is the indexedDB database is judged firstly; if yes, storing all the data to a local indexedDB database; and if not, storing all the data into a local localStorage database.
It is understood that a cookie, sessionStorage, LocalForage, etc. may be used instead of the above storage.
S207, the client determines identification information of a target node according to the checking operation of the node relation graph and the checking operation of the node relation graph;
s208, the client side obtains all data of the target node from the local database by using a javascript script according to the identification information;
s209, the client displays all data of the target node visually by using the visual graphic plug-in.
When the user operates the relational graph interface to obtain more detailed data, corresponding data are obtained from the local database according to identification information such as node IDs through the javascript script, and then the relational graph interface is rendered again through the tick method of d3.
As described above, in step S206, the client needs to store all the acquired data, and since all the acquired data generally belong to complex data, the indexedDB database is preferentially used for storage, and the specific storage scheme is as follows:
s2061, judging whether the browser supports the indexedDB database or not through the if method.
The specific indexedDB judgment method of each mainstream browser is as follows: creating a variable indexedDB, and enabling the variable indexedDB to take values of indexedDB objects of each browser, wherein the specific execution mode is as follows:
Var indexedDB＝window.indexedDB||window.webkitIndexedDB||window.mozIndexedDB||window.msIndexedDB；
and if the finally obtained indexedDB has a value, the current browser is indicated to support the indexedDB database. Wherein, window.
S2062, if the current browser supports the indeedDB database, executing an indeedDB. open () method through a javascript script to obtain an IDBOpenDBRequest object.
The specific execution mode is as follows:
Var request＝indexedDB.open(‘relationChart’)；
here, a request variable is created, and an IDBOpenDBRequest object is created by the open method of the variable indexedDB declared in S2061.
S2063, judging whether the objectStore named relationChartData exists, if not, creating an objectStore by createObjectStore method, the objectStore being a flexible data structure for storing all the above data. The specific execution mode is as follows:
db.createObjectStore(‘relationChartData’)；
an objectStore named relationChartData is created here.
S2064, initializing a database transaction through the transaction method of indexedDB.
S2065, the transaction initialized in step S2064, and the objectStore created in step S2063 is acquired by the objectStore method of the transaction.
S2066, storing all the acquired data by the add method of the objectStore acquired in step S2065.
If the data does not pass the step S2061, that is, the current browser does not support the indereddb storage mode, the localsteroge mode is adopted to store all the acquired data, and the specific storage mode is as follows: and judging whether the current browser supports localsterog storage (currently most mainstream browsers support) by using a window.
In summary, the present embodiment is to solve the problem that the request for loading the visual graph data is slow and the rendering is stuck under the condition of a large number of data nodes. To solve the problem, the present embodiment provides a method for displaying a node relationship graph, which includes the following steps: when a visual graphic website based on d3 is opened, a client sends a request for acquiring basic data to a server; the server acquires basic data of all nodes from a database of the server, arranges the basic data into a json format commonly used by the client and sends the json format to the client; the client displays the basic data returned by the server by using a relational graph in a d3 visual library, and requests all data of the nodes from the server when acquiring the basic data returned by the server for the first time; the server processes all data of all nodes into json format and returns the json format; the client stores all data of all nodes in an indexedDb local database or stores the data through localStroge; when the user performs related operations on the operation interface to obtain more data or information of the relationship graph, the user can directly obtain corresponding node data from indereddb or localsteroge, and then update the relationship graph interface.
It can be seen that when a user accesses a d3 relationship graph interface requiring a large amount of node data, the page of this embodiment does not load all the relationship graph data or only part of the nodes at a time, but first displays basic information of all the nodes, at this time, the display is only the basic information equivalent to the shell of the node, and the detailed data of the node is requested to be loaded in the background. All the detailed contents of the page are stored in the local, and only when a user needs a certain part of data for operating the page, the information of the part is obtained through the javascript script, so that the phenomenon that the page is blocked when too many data are simultaneously rendered in the page relation graph is avoided. On one hand, the rendering of the relational graph interface can be smoothly realized, the page blank condition in the data request process is reduced, and the user does not need to wait for too long time; on the other hand, the katoon problem caused by excessive relation graph content loaded by the page at one time when the interface is rendered is reduced.
A third embodiment of the node relationship graph display method provided by the present application is described in detail below, and the third embodiment is implemented based on the first embodiment and is expanded to a certain extent based on the first embodiment.
In this embodiment, a refresh process of all data on the client side is described in consideration of a possibility that node data on the server side may change on the basis of the first embodiment. As shown in fig. 3, the third embodiment is applied to the client, and includes the following steps:
s301, sending a basic data acquisition request to a server according to the opening operation of the node relation graph;
s302, receiving basic data of the node returned by the server according to the basic data acquisition request;
s303, rendering a node relation graph according to the basic data by using a visual graphic plug-in, and sending all data acquisition requests to the server;
s304, receiving all data of the nodes returned by the server according to the all data acquisition request and the version numbers of the all data, and storing the all data and the version numbers to a local database;
s305, carrying out visual display on corresponding node data stored in the local database by using a visual graphic plug-in according to the viewing operation of the node relation graph;
s306, when the preset refreshing condition is reached, sending a refreshing request carrying the version number to the server, so that the server sends all the data of the nodes to the client again when the version number of the server is different from the version number sent by the server.
The preset refresh conditions include: and detecting a refreshing operation on the node relation graph and/or detecting an opening operation on the node relation graph again.
When the user refreshes the current page, the browser does not need to request the relational graph data from the requesting server again, but directly obtains the relational graph data from the local indexedDB database or the localsteroge storage. Therefore, when the data of the node on the server side is updated, the client side may not request the data of the server any more but use the locally stored data, so that the rendered page relation graph may not be up to date.
Therefore, in this embodiment, when the server returns all the data of the node, an identification attribute, such as a timestamp, a version number of all the data, and the like, is returned to the client, the client stores the identification attribute together with all the data, and when the user refreshes the interface or accesses the page for the second time, the client should previously acquire an identification value from a local indexedDB database or localsrogue storage, and send the identification value to the server along with the refresh request. If the data of the nodes on one side of the server is not changed, the data of the client is informed to be unchanged, then the client directly obtains the data from the local to perform rendering of the relational graph, and if the data is changed, the server sends all the data of the nodes to the client again so that the client updates all the data of the nodes in the local database.
In the following, a display device of a node relationship diagram provided in an embodiment of the present application is introduced, and a display device of a node relationship diagram described below and a display method of a node relationship diagram described above may be referred to correspondingly.
The display apparatus of the node relationship graph of the present embodiment is applied to the client, as shown in fig. 4, and includes:
the first request module 401: the basic data acquisition request is sent to the server according to the opening operation of the node relation graph;
the first receiving module 402: the basic data of the nodes returned by the server according to the basic data acquisition request is received;
the second request module 403: the node relation graph is rendered according to the basic data by utilizing a visual graphic plug-in, and all data acquisition requests are sent to the server;
the second receiving module 404: the data acquisition server is used for receiving all data of the nodes returned by the server according to the all data acquisition requests and storing the all data into a local database;
the detail display module 405: and the node relation graph display module is used for carrying out visual display on corresponding node data stored in the local database by utilizing a visual graphic plug-in according to the viewing operation of the node relation graph.
The display apparatus of the node relationship diagram in this embodiment is used to implement the display method of the node relationship diagram, and therefore a specific implementation manner in the apparatus can be seen in the embodiment parts of the display method of the node relationship diagram in the foregoing, for example, the first requesting module 401, the first receiving module 402, the second requesting module 403, the second receiving module 404, and the detail displaying module 405 are respectively used to implement steps S101, S102, S103, S104, and S105 in the display method of the node relationship diagram. Therefore, specific embodiments thereof may be referred to in the description of the corresponding respective partial embodiments, and will not be described herein.
In addition, since the display apparatus of the node relationship diagram of this embodiment is used to implement the display method of the node relationship diagram, the role thereof corresponds to that of the method described above, and details thereof are not repeated here.
In addition, the present application also provides a display device of a node relationship diagram, as shown in fig. 5, including:
the memory 100: for storing a computer program;
the processor 200: for executing said computer program for implementing the steps of the method for displaying a node relationship graph as described above.
Finally, the present application provides a readable storage medium having stored thereon a computer program for implementing the steps of the method for displaying a node relationship graph as described above when executed by a processor.
The embodiments are described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same or similar parts among the embodiments are referred to each other. The device disclosed by the embodiment corresponds to the method disclosed by the embodiment, so that the description is simple, and the relevant points can be referred to the method part for description.
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 Random Access Memory (RAM), memory, Read Only Memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.
The above detailed descriptions of the solutions provided in the present application, and the specific examples applied herein are set forth to explain the principles and implementations of the present application, and the above descriptions of the examples are only used to help understand the method and its core ideas of the present application; meanwhile, for a person skilled in the art, according to the idea of the present application, there may be variations in the specific embodiments and the application scope, and in summary, the content of the present specification should not be construed as a limitation to the present application.
Claims (10)
1. A display method of a node relation graph is applied to a client and comprises the following steps:
sending a basic data acquisition request to a server according to the opening operation of the node relation graph;
receiving basic data of the node returned by the server according to the basic data acquisition request;
rendering a node relation graph according to the basic data by using a visual graphic plug-in, and sending all data acquisition requests to the server;
receiving all data of the nodes returned by the server according to the all data acquisition requests, and storing the all data into a local database;
and according to the viewing operation of the node relation graph, carrying out visual display on the corresponding node data stored in the local database by using a visual graphic plug-in.
2. The method of claim 1, wherein prior to said receiving the base data for the node returned by the server in accordance with the base data acquisition request, further comprising:
and the server acquires a request according to the basic data, converts the basic data of the node into a json format and sends the json format to the client.
3. The method of claim 1, wherein the visually presenting, with a visualization graph plug-in, corresponding node data stored in the local database in accordance with the view operation on the node relationship graph comprises:
determining identification information of a target node according to the viewing operation of the node relation graph;
acquiring all data of the target node from the local database by using a javascript script according to the identification information;
and carrying out visual display on all data of the target node by using a visual graphic plug-in.
4. The method of claim 1, wherein said storing said entire data to a local database comprises:
and storing all the data into a local indexedDB database or a localStorage database.
5. The method of claim 4, wherein said storing said entire data to a local indexedDB database or localStorage database, comprises:
judging whether the local support is the indexedDB database;
if yes, storing all the data to a local indexedDB database;
and if not, storing all the data into a local localStorage database.
6. The method according to any one of claims 1 to 5, wherein the receiving all data of the nodes returned by the server according to the all data acquisition requests and storing the all data in a local database comprises:
receiving all data of the nodes returned by the server according to the all data acquisition request and the version numbers of the all data, and storing the all data and the version numbers to a local database;
and when a preset refreshing condition is reached, sending a refreshing request carrying the version number to the server, so that the server sends all the data of the nodes to the client again when the version number of the server is different from the version number sent by the server.
7. The method of claim 6, wherein the preset refresh condition comprises: and detecting a refreshing operation on the node relation graph and/or detecting an opening operation on the node relation graph again.
8. The display device of the node relation graph is applied to a client and comprises the following components:
a first request module: the basic data acquisition request is sent to the server according to the opening operation of the node relation graph;
a first receiving module: the basic data of the nodes returned by the server according to the basic data acquisition request is received;
a second request module: the node relation graph is rendered according to the basic data by utilizing a visual graphic plug-in, and all data acquisition requests are sent to the server;
a second receiving module: the data acquisition server is used for receiving all data of the nodes returned by the server according to the all data acquisition requests and storing the all data into a local database;
a detail display module: and the node relation graph display module is used for carrying out visual display on corresponding node data stored in the local database by utilizing a visual graphic plug-in according to the viewing operation of the node relation graph.
9. A display device of a node relationship diagram, comprising:
a memory: for storing a computer program;
a processor: for executing said computer program for carrying out the steps of the display method of a node relationship graph according to any of claims 1-7.
10. A readable storage medium, having stored thereon a computer program for implementing the steps of the method for displaying a node relationship diagram according to any one of claims 1 to 7 when being executed by a processor.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010053596.7A CN111274308A (en) | 2020-01-17 | 2020-01-17 | Node relation graph display method, device and equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010053596.7A CN111274308A (en) | 2020-01-17 | 2020-01-17 | Node relation graph display method, device and equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111274308A true CN111274308A (en) | 2020-06-12 |
Family
ID=70998787
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010053596.7A Pending CN111274308A (en) | 2020-01-17 | 2020-01-17 | Node relation graph display method, device and equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111274308A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111541786A (en) * | 2020-07-08 | 2020-08-14 | 中科全维科技(苏州)有限公司 | P2P network-oriented geospatial situation system and construction method |
| CN113204442A (en) * | 2021-05-31 | 2021-08-03 | 成都安恒信息技术有限公司 | Javascript library for operating IndexDB based on MVVM mode |
| CN115174684A (en) * | 2022-07-05 | 2022-10-11 | 中孚信息股份有限公司 | Network data visualization platform, system and method |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110055314A1 (en) * | 2009-09-02 | 2011-03-03 | Facebook Inc. | Page rendering for dynamic web pages |
| CN106302557A (en) * | 2015-05-11 | 2017-01-04 | 阿里巴巴集团控股有限公司 | Page loading method and relevant device, system |
| CN106991154A (en) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | Webpage rendering intent, device, terminal and server |
| CN107729516A (en) * | 2017-10-26 | 2018-02-23 | 北京百度网讯科技有限公司 | Single page application methods of exhibiting and device, server, equipment and computer-readable recording medium |
| CN110096659A (en) * | 2019-03-27 | 2019-08-06 | 北京三快在线科技有限公司 | A kind of page display method, device, equipment and readable storage medium storing program for executing |
-
2020
- 2020-01-17 CN CN202010053596.7A patent/CN111274308A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110055314A1 (en) * | 2009-09-02 | 2011-03-03 | Facebook Inc. | Page rendering for dynamic web pages |
| CN106302557A (en) * | 2015-05-11 | 2017-01-04 | 阿里巴巴集团控股有限公司 | Page loading method and relevant device, system |
| CN106991154A (en) * | 2017-03-29 | 2017-07-28 | 百度在线网络技术（北京）有限公司 | Webpage rendering intent, device, terminal and server |
| CN107729516A (en) * | 2017-10-26 | 2018-02-23 | 北京百度网讯科技有限公司 | Single page application methods of exhibiting and device, server, equipment and computer-readable recording medium |
| CN110096659A (en) * | 2019-03-27 | 2019-08-06 | 北京三快在线科技有限公司 | A kind of page display method, device, equipment and readable storage medium storing program for executing |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111541786A (en) * | 2020-07-08 | 2020-08-14 | 中科全维科技(苏州)有限公司 | P2P network-oriented geospatial situation system and construction method |
| CN113204442A (en) * | 2021-05-31 | 2021-08-03 | 成都安恒信息技术有限公司 | Javascript library for operating IndexDB based on MVVM mode |
| CN113204442B (en) * | 2021-05-31 | 2023-11-24 | 成都安恒信息技术有限公司 | MVVM mode-based javascript library system for operating IndexdDB |
| CN115174684A (en) * | 2022-07-05 | 2022-10-11 | 中孚信息股份有限公司 | Network data visualization platform, system and method |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106991154B (en) | Webpage rendering method and device, terminal and server | |
| CN111274308A (en) | Node relation graph display method, device and equipment | |
| US9317302B2 (en) | Method and algorithm for content layout across diverse and dynamic displays | |
| CN106294658B (en) | Webpage quick display method and device | |
| US10339209B2 (en) | Webpage display method and device | |
| CN107818008B (en) | Page loading method and device | |
| CN112667330B (en) | Page display method and computer equipment | |
| CN107992589B (en) | SVG map data loading method, device and system | |
| CN111651700B (en) | Message display method and device, electronic equipment and storage medium | |
| CN104254849A (en) | User terminal apparatus supporting fast web scroll of web documents and method therefor | |
| CN115309470A (en) | Method, device and equipment for loading widgets and storage medium | |
| US9383909B2 (en) | Display systems and methods for dynamically updating a graphical user interface | |
| CN109948084B (en) | Webpage information display method, device, medium and computing equipment | |
| JP2016095501A (en) | Document layout for electronic display | |
| CN111460342B (en) | Page rendering display method and device, electronic equipment and computer storage medium | |
| CN110069254B (en) | Text display method, text display device and server | |
| CN111666517A (en) | Webpage access method and device and computer equipment | |
| CN116821534A (en) | Method and system for positioning webpage based on rolling loading | |
| CN114693893B (en) | Data processing method and device, electronic equipment and storage medium | |
| CN112667934A (en) | Dynamic simulation diagram display method and device, electronic equipment and computer readable medium | |
| CN116088966A (en) | Method and system for loading high-performance tree control | |
| CN113722031B (en) | Dynamic display method, equipment, medium and product of electronic signature | |
| US9443441B1 (en) | View port resolution independent network pages | |
| CN113190321A (en) | Method and equipment for application program page pull-up refreshing | |
| CN114489910A (en) | Video conference data display method, device, equipment and medium |
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 |