CN115203619B - Web-based three-dimensional graph data layout method and system - Google Patents
Web-based three-dimensional graph data layout method and system Download PDFInfo
- Publication number
- CN115203619B CN115203619B CN202211114172.2A CN202211114172A CN115203619B CN 115203619 B CN115203619 B CN 115203619B CN 202211114172 A CN202211114172 A CN 202211114172A CN 115203619 B CN115203619 B CN 115203619B
- Authority
- CN
- China
- Prior art keywords
- node
- octree
- web
- nodes
- graph data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- 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/901—Indexing; Data structures therefor; Storage structures
- G06F16/9027—Trees
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The application relates to a three-dimensional graph data layout method and a three-dimensional graph data layout system based on Web, wherein the three-dimensional graph data layout method based on Web comprises the following steps: the connection graph database is used for acquiring and constructing graph data from the graph database according to the query statement and transmitting the graph data to an initialization function of the WebAssembly wasm; the web worker receives an algorithm running event, continuously calls a single step operation function of the WebAssembly wasm to execute the force guiding algorithm on the graph data, and transmits an algorithm result to a web front end to execute rendering until the running state value of the algorithm running event reaches a preset threshold value; by the method and the device, the problem of low layout efficiency when the three-dimensional graph data layout is carried out at the web end in the related art is solved.
Description
Technical Field
The application relates to the technical field of data visualization, in particular to a three-dimensional graph data layout method and system based on Web.
Background
The Force-Directed Graph (Force-Directed Graph) can configure nodes in a three-dimensional space, calculate the motion tracks of the nodes and connecting lines according to the action of Force, continuously reduce the energy of the nodes and the connecting lines, and finally reach a stable state with low energy. The Graph database (Graph database) does not refer to a database for storing pictures, but stores and queries data based on a data structure such as a Graph, and is a data management system which takes a point and edge-based storage unit as a design principle for efficiently storing and querying Graph data. In order to better display large-scale graph data, a three-dimensional technology is needed, and a limited area is completed to contain more node information. The force-oriented spatial layout is mainly used for visualizing graph data in a three-dimensional space rapidly under a web environment, and a user can conveniently mine data hidden in a relationship.
In the conventional web three-dimensional force guide graph at present, d3-force-3d and d3-force-3d which are commonly used realize a velocity Verlet numerical integrator, are used for simulating physical motion of particles, and can simulate random motion of the physical particles according to the relationship between nodes and edges without excessive intervention. However, the algorithm has less optimization and poor running performance at the web end, thereby resulting in low layout efficiency when the three-dimensional graph data layout is performed at the web end.
Aiming at the problem that the layout efficiency is low when the three-dimensional graph data layout is carried out at the web end in the related art, an effective solution is not provided.
Disclosure of Invention
The embodiment of the application provides a three-dimensional graph data layout method and system based on Web, which are used for at least solving the problem of low layout efficiency when the three-dimensional graph data layout is carried out at a Web end in the related art.
In a first aspect, an embodiment of the present application provides a three-dimensional graph data layout method based on Web, which is applied to a browser;
the browser generates a web worker and transmits a WebAssembly wap file into the web worker, wherein a force-oriented algorithm is compiled in the WebAssembly wap file, and the method comprises the following steps:
the connection graph database is used for acquiring and constructing graph data from the graph database according to query statements, and transmitting the graph data to an initialization function of the WebAssembly wasm;
and the web worker receives an algorithm operation event, continuously calls a single-step operation function of the WebAssembly wasm to execute the force guidance algorithm on the graph data, and transmits the algorithm result to the web front end to execute rendering until the operation state value of the algorithm operation event reaches a preset threshold value.
In some of these embodiments, the process of executing the force directing algorithm includes constructing an octree, the process of constructing an octree including:
and constructing a node memory pool of the octree, and uniformly managing generation and destruction of all nodes.
In some embodiments, after constructing the node memory pool of the octree, the constructing the octree includes traversing all nodes, and during the traversing:
if the node has a corresponding tree node for insertion, inserting the node into the minimum-size octree of the descendant of the head node; if no corresponding tree node is available for insertion, reading or generating a new tree node from the node memory pool, and reducing the size of the octree by one time; and recursively inserting the nodes, and accumulating the coordinate values of all sub-nodes under the current node during each insertion.
In some embodiments, after traversing all the nodes, the constructing the octree comprises: executing a depth-first search (DFS), and removing nodes with the number of descendants being zero; the center of gravity of each octree node is generated.
In some embodiments, after constructing the octree, the process of executing the force directing algorithm further comprises:
determining whether the node degree of the node is greater than a preset degree value or not according to the octree, and determining whether the distance from the node to the corresponding tree node in the octree is greater than a preset length value or not;
if yes, calculating the stress of the node according to a first stress formula of the node so as to enable the node to be close to a core area, and filtering remote point operation; otherwise, the stress of the node is calculated according to the second stress formula.
In a second aspect, an embodiment of the present application provides a three-dimensional graph data layout system based on Web, where the system includes a browser, a Web worker, a WebAssembly wasm file, and a Web front end;
the browser generates a web worker and transmits a WebAssembly wap file into the web worker, wherein a force-oriented algorithm is compiled in the WebAssembly wap file;
the browser connection graph database acquires and constructs graph data from the graph database according to query statements, and transmits the graph data to an initialization function of the WebAssembly wasm;
and the web worker receives an algorithm operation event, continuously calls a single-step operation function of the WebAssembly wasm to execute the force guidance algorithm on the graph data, and transmits the algorithm result to the web front end to execute rendering until the operation state value of the algorithm operation event reaches a preset threshold value.
In some embodiments, the process of the web worker calling the one-step operation function of the WebAssembly wasm to execute the force directing algorithm on the graph data includes constructing an octree, the process of constructing the octree including:
and constructing a node memory pool of the octree, and uniformly managing generation and destruction of all nodes.
In some embodiments, after constructing the octree, the process of executing the force directing algorithm further comprises:
determining whether the node degree of the node is greater than a preset degree value or not according to the octree, and determining whether the distance from the node to the corresponding tree node in the octree is greater than a preset length value or not;
if yes, calculating the stress of the node according to a first stress formula of the node so as to enable the node to be close to a core area, and filtering remote point operation; otherwise, the stress of the node is calculated according to the second stress formula.
In a third aspect, an embodiment of the present application provides an electronic apparatus, which includes a memory and a processor, and is characterized in that the memory stores a computer program, and the processor is configured to execute the computer program to execute the Web-based three-dimensional graph data layout method.
In a fourth aspect, an embodiment of the present application provides a storage medium, where a computer program is stored in the storage medium, where the computer program is configured to execute the method for laying out three-dimensional Web-based graph data when running.
Compared with the problem that layout efficiency is low when three-dimensional graph data layout is carried out on a web side in the related art, firstly, graph data are obtained and constructed from a graph database according to query statements through a connection graph database, and the graph data are transmitted to an initialization function of the WebAssembly wasm; the web worker receives an algorithm operation event, continuously calls a single-step operation function of the WebAssembly wap to execute the force guiding algorithm on the graph data, and transmits an algorithm result to a web front end to execute rendering until the operation state value of the algorithm operation event reaches a preset threshold value, so that the algorithm is not limited by the calculation limit of a web end JavaScript environment, the operation efficiency is improved, and the problem of low layout efficiency when the three-dimensional graph data layout is carried out at a web end in the related technology is solved;
secondly, the deployed WebAssembly is reasonably utilized, and the generation and destruction of all nodes in the WebAssembly are uniformly managed, so that the automatic Garbage Collection (GC for short) of the memory nodes is reduced, the occupied performance of a CPU (Central processing Unit) is avoided when the GC is balanced, the construction process of the octree is faster, and the problem of low layout efficiency when the three-dimensional graph data layout is carried out at a web end in the related technology is further solved;
thirdly, the process of accumulating the coordinate values of the child nodes and determining the gravity center of the octree nodes is put into the process of constructing the octree, so that backtracking operation in the process of calculating the gravity center of the octree is reduced, the number of logic iterations is reduced, useless nodes (the number of descendants is zero) are eliminated, the calculation amount is obviously reduced, the layout efficiency in the process of carrying out three-dimensional graph data layout at a web end is improved, and the problem of lower layout efficiency in the process of carrying out three-dimensional graph data layout at the web end in the related art is further solved;
in addition, the LinLog model of the points with large degrees is optimized, the node degrees are larger than the preset degree value, the distance from the node to the corresponding tree node in the octree is larger than the preset length value, and the calculation repulsion force is distinguished from the common node, so that the points with large degrees are less influenced by the stress of the remote nodes, the large nodes are prevented from deviating from the core area, the large nodes are concentrated as much as possible, the visual layout effect of the three-dimensional graph data is improved, and the super points which are often more concerned by a user are positioned in the center area of the whole visual graph.
Drawings
The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:
FIG. 1 is a schematic diagram of a Web-based three-dimensional graph data layout method according to an embodiment of the application;
FIG. 2 is a diagram illustrating a process for performing a single-step operation according to an embodiment of the present application;
FIG. 3 is a schematic diagram of an implementation of the force steering algorithm according to an embodiment of the present application;
fig. 4 is an internal structural diagram of an electronic device according to an embodiment of the present application.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be described and illustrated below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments provided in the present application without any inventive step are within the scope of protection of the present application.
It is obvious that the drawings in the following description are only examples or embodiments of the application, and that it is also possible for a person skilled in the art to apply the application to other similar contexts on the basis of these drawings without inventive effort. Moreover, it should be appreciated that in the development of any such actual implementation, as in any engineering or design project, numerous implementation-specific decisions must be made to achieve the developers' specific goals, such as compliance with system-related and business-related constraints, which may vary from one implementation to another.
Reference in the specification to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the specification. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of ordinary skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments without conflict.
Unless defined otherwise, technical or scientific terms referred to herein shall have the ordinary meaning as understood by those of ordinary skill in the art to which this application belongs. Reference to "a," "an," "the," and similar words throughout this application are not to be construed as limiting in number, and may refer to the singular or the plural. The present application is directed to the use of the terms "including," "comprising," "having," and any variations thereof, which are intended to cover non-exclusive inclusions; for example, a process, method, system, article, or apparatus that comprises a list of steps or modules (elements) is not limited to the listed steps or elements, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus. Reference to "connected," "coupled," and the like in this application is not intended to be limited to physical or mechanical connections, but rather can include electrical connections, whether direct or indirect. The term "plurality" as referred to herein means two or more. "and/or" describes an association relationship of associated objects, meaning that three relationships may exist, for example, "A and/or B" may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship. Reference herein to the terms "first," "second," "third," and the like, are merely to distinguish similar objects and do not denote a particular ordering for the objects.
The application provides a three-dimensional graph data layout method based on Web, which is applied to a browser, and before the three-dimensional graph data layout method based on Web is executed, the following preparation work needs to be executed: generating a web worker (hereinafter referred to as the worker), and transmitting a WebAssembly wave file for compiling a force-oriented algorithm into the worker; for example, initializing a worker, enabling the worker to have the capability of sending and receiving data, acquiring a compiled WebAssembly wave file through a fetch remote file or a memory file, and caching the WebAssembly wave file in a memory; and transferring a wasm file in the memory into the worker, and initializing a wasm instance in the worker.
Fig. 1 is a schematic diagram of a Web-based three-dimensional graph data layout method according to an embodiment of the present application, and as shown in fig. 1, the flow includes the following steps:
step S101, connecting a graph database, acquiring and constructing graph data from the graph database according to query statements, and transmitting the graph data to an initialization function of the WebAssembly wasm;
for example, a Nebula Graph is connected, a certain amount of edge data and point data are obtained through query statements, two end points on an edge and points are subjected to de-coincidence to obtain a Node array, then a Link array is obtained through edge data construction, and the data format is converted into { nodes [ ] and links [ ] in. ] }; transmitting the constructed graph data into a worker, transmitting the graph data into an initialization function of wsm in the worker, generating an initialization memory space, and simultaneously reading initialization nodes data and links data in the wsm;
step S102, the web worker receives an algorithm running event, continuously calls a single step operation function of the WebAssembly wasm to execute the force guiding algorithm on the graph data, and transmits an algorithm result to a web front end to execute rendering until the running state value of the algorithm running event reaches a preset threshold value;
for example, fig. 2 is a schematic diagram of an execution process of a single-step operation according to an embodiment of the present application, and as shown in fig. 2, when a worker receives an event of an algorithm operation, a single-step operation function in wasm is called, in the function of the single-step operation, a result of a force derivative function operation completion is processed, and a WebAssembly algorithm reduces a result data structure into a one-dimensional array and transmits the one-dimensional array to a front-end rendering; and circularly executing the single step operation steps until reaching an algorithm set threshold value and then stopping.
Through the steps S101 to S102, compared with the problem of low layout efficiency when three-dimensional graph data layout is performed at a web end in the related art, in the embodiment of the present application, graph data is obtained and constructed from a graph database according to a query statement by connecting the graph database, and the graph data is transmitted to an initialization function of the web worker, and the transmission to the web worker is equivalent to the placement of a background to run, and does not occupy a thread of a current browser; and the self-decoding can be directly generated by using the WebAssembly for the browser to run, compared with a virtual machine, the running speed is higher, the web worker receives an algorithm running event, a single-step operation function of the WebAssembly wap is continuously called to execute the force guiding algorithm on the graph data, and the algorithm result is transmitted to the web front end to execute rendering until the running state value of the algorithm running event reaches a preset threshold value, so that the computation limit of a web end JavaScript environment in the prior art is not limited, the running efficiency is improved, and the problem of lower layout efficiency when the three-dimensional graph data layout is carried out at the web end in the related art is solved.
The method mainly aims to calculate the x, y and z coordinates of each Node, so that the x, y and z values of Node objects in a Node array of a result can be put into a one-dimensional digital array according to the index sequence of nodes, and then a js function is called reversely to inform data to a worker; and after receiving the data, returning the data to the front-end rendering by sending a message.
In some embodiments, fig. 3 is a schematic diagram of performing the force directing algorithm according to an embodiment of the present application, and as shown in fig. 3, the process includes:
step S301, constructing an octree for auxiliary calculation;
for example, traversing all nodes to obtain the maximum coordinate value to obtain the radius size of the octree to be calculated; constructing a node memory pool of the octree, uniformly managing generation and destruction of all nodes, multiplexing the octree node memory pool when an instance exceeds the memory pool, and generating a head node;
traversing all the nodes, inserting the nodes into the minimum-size octree of the head node descendant according to the coordinates, if no tree node for insertion exists, reading or generating a new tree node from the node memory pool, and reducing the size of the octree by one time; then recursively inserting the affected nodes and the nodes to be inserted; accumulating the coordinate values of all the subnodes under the node during each insertion and counting;
after traversing all the nodes, performing Depth-First-Search (DFS for short) once, eliminating useless nodes (the number of descendants is zero), and simultaneously generating the gravity center of each octree node, namely dividing the coordinate value of the node by the number of the descendants of the node;
through the step S301, compared with technologies such as d3-force-3d in the prior art, optimization of the prior art at the web end is less, a lot of invalid cycles are generated, and the operation performance is poor, for example, memory occupation of octree generation in the prior art is too large, extra calculation is needed for gravity center solution, readability is poor, and therefore layout efficiency is low when three-dimensional graph data layout is performed at the web end.
In addition, the algorithm of the octree in the conventional technology does not uniformly manage generation and destruction of all nodes, and a js technology used in the conventional technology for three-dimensional graph data layout at a web end does not support uniform management of generation and destruction of all nodes.
The application provides pseudo code for constructing the octree, and the runtime environment library comprises: nebula Graph 3.1.0, chrome 102, golang 1.17;
the identification definition includes: node: { id: string, x: number, y: number, z: number }; link: { src: string, dst: string, id: string }; octree eNode: octree nodes; octreeNodePool: a pool of node instances of the octree;
the related logic of the pseudocode setIntoTree is as follows:
step S302, calculating the stress value and the coordinate value of the node according to the octree;
for example, set the octree eNode of size 512, traverse each node, and start traversing from the head node of the octree; judging whether the head node distance of the current octree meets the requirement of a formula, if so, performing force operation, and then obtaining stress information of the nodes and storing the stress information into node data; if not, recursing the octree node downwards, and performing next iteration until the octree node meeting the condition is obtained or no node is obtained; in the traversal process, the data are repeatedly utilized from a unified OctreeNodePool memory pool, due to the structural characteristics of the octree, points with 8^512 power magnitude can exist when the traversal depth reaches 512, and actual operation cannot be achieved, so that the safety of repeated utilization can be guaranteed;
traversing all the Links in the connection relation, carrying out stress operation on the points at the two ends of the link, and adding the stress operation result to the points at the two ends; traversing all points, multiplying all the stress data on the points by the current single-step operation coefficient, and finally accumulating the stress data to the coordinate values of the nodes to obtain an operation result;
the node stress formula is shown as formula 1, the embodiment of the application optimizes a LinLog model for a point with a large degree, when the node degree of the node is greater than a preset degree value and the distance from the node to a corresponding tree node in an octree is greater than a preset length value (n.degree > maxDegrere, l > l _ max), a first formula (nonlinear) in the formula 1 is followed, otherwise, a second formula (linear) in the formula 1 is followed, so that the point with the large degree is less influenced by the stress of a remote node, the large node is prevented from deviating from a core area, the large node is concentrated as much as possible, and the remote point operation is filtered according to the distance between the center of gravity and the point.
Wherein n is a node, F (n) is a repulsive force borne by the node n, tree is an octree, t is a tree node in the octree, dis (n, t) is a distance from n to t, size is a cube size of the current octree node t, theta is a calculation accuracy constant of the octree, whether deep recursion is continued or not can be adjusted, a vector n represents a vector difference between two points, k is a constant coefficient of stress size, l is a distance from n to t, l _ max is a maximum distance threshold constant, t.number is the total number of nodes of the octree nodes, n.degree is the degree of the current node, maxDegrese is a maximum degree threshold of the node, and k, theta, maxDegrese and l _ max are configuration constants and can be configured according to system effects;
the stress formula of the node on the edge is shown in formula 2, and the node is attractive when the distance of the edge is larger and repulsive when the distance of the edge is smaller;
Wherein n is a node, F (n) is the stress of the node on the edge, link is a connecting line between the nodes, links is a connecting line set, a vector n represents the vector difference between two points, k is a stress magnitude constant coefficient, l is the current connecting line distance, and l _ max is the maximum connecting line distance constant.
The embodiment of the application also provides the performance comparison of the embodiment of the application and the prior art. Table 1 is a comparison table of single step operation time according to the embodiment of the present application and single step operation time according to d3-force-3 d:
TABLE 1
| d3-force-3d | This application | |
| 2w point, 2000 edge | 113ms | 60ms |
| Point 10w, edge 10w | >3s | 1s |
From table 1, it can be seen that the layout efficiency is significantly higher due to the optimized octree generation logic and the clipped octree, and the larger the data amount is, the better the optimization effect is.
In combination with the three-dimensional graph data layout method based on the Web in the foregoing embodiments, the embodiments of the present application may provide a storage medium to implement. The storage medium having stored thereon a computer program; the computer program, when executed by a processor, implements any of the Web-based three-dimensional graph data layout methods in the above embodiments.
In one embodiment, a computer device is provided, which may be a terminal. The computer device includes a processor, a memory, a network interface, a display screen, and an input device connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The network interface of the computer device is used for communicating with an external terminal through a network connection. The computer program is executed by a processor to implement a Web-based three-dimensional graph data layout method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.
In one embodiment, fig. 4 is a schematic diagram of an internal structure of an electronic device according to an embodiment of the present application, and as shown in fig. 4, there is provided an electronic device, which may be a server, and its internal structure diagram may be as shown in fig. 4. The electronic device comprises a processor, a network interface, an internal memory and a non-volatile memory connected by an internal bus, wherein the non-volatile memory stores an operating system, a computer program and a database. The processor is used for providing calculation and control capability, the network interface is used for communicating with an external terminal through network connection, the internal memory is used for providing an environment for an operating system and the running of a computer program, the computer program is executed by the processor to realize a Web-based three-dimensional graph data layout method, and the database is used for storing data.
Those skilled in the art will appreciate that the configuration shown in fig. 4 is a block diagram of only a portion of the configuration associated with the present application, and does not constitute a limitation on the electronic device to which the present application is applied, and a particular electronic device may include more or less components than those shown in the drawings, or combine certain components, or have a different arrangement of components.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in the embodiments provided herein may include non-volatile and/or volatile memory, among others. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically Programmable ROM (EPROM), electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous Link DRAM (SLDRAM), rambus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).
It will be understood by those skilled in the art that for simplicity of description, not all possible combinations of the various features of the embodiments described above have been described, but such combinations should be considered within the scope of the present disclosure as long as there is no conflict between such features.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.
Claims (5)
1. A three-dimensional graph data layout method based on Web is applied to a browser, the browser generates a Web worker, and a WebAssembly wasm file is transmitted into the Web worker, wherein a force-oriented algorithm is compiled in the WebAssembly wasm file, and the method comprises the following steps:
the connection graph database is used for acquiring and constructing graph data from the graph database according to query statements, and transmitting the graph data to an initialization function of the WebAssembly wasm;
the web worker receives an algorithm running event, continuously calls a single step operation function of the WebAssembly wasm to execute the force guide algorithm on the graph data, and transmits an algorithm result to a web front end to execute rendering until the running state value of the algorithm running event reaches a preset threshold value;
the process of executing the force directing algorithm comprises constructing an octree, determining whether the node degree of a node is greater than a preset degree value according to the octree, and determining whether the distance from the node to a corresponding tree node in the octree is greater than a preset length value; if yes, calculating the stress of the node according to a first stress formula of the node so as to enable the node to be close to the core area, and filtering remote point operation; otherwise, calculating the stress of the node according to a second stress formula;
the process of constructing the octree includes:
constructing a node memory pool of the octree, and uniformly managing the generation and destruction of all nodes;
traversing all the nodes, and in the traversing process, if the nodes have tree nodes which are correspondingly available for insertion, inserting the nodes into the minimum-size octree of the head node descendant; if no corresponding tree node is available for insertion, reading or generating a new tree node from the node memory pool, and reducing the size of the octree by one time; and recursively inserting the nodes, and accumulating the coordinate values of all sub-nodes under the current node during each insertion.
2. The method of claim 1, wherein after traversing all nodes, the constructing the octree comprises: executing depth-first search DFS, and removing nodes with the number of descendants being zero; the center of gravity of each octree node is generated.
3. A three-dimensional graph data layout system based on Web is characterized by comprising a browser, a Web worker, a WebAssembly wap file and a Web front end;
the method comprises the steps that a web worker is generated by the browser, a WebAssembly wasm file is transmitted into the web worker, and a force oriented algorithm is compiled in the WebAssembly wasm file;
the browser connection graph database acquires and constructs graph data from the graph database according to query statements, and transmits the graph data to an initialization function of the WebAssembly wasm;
the web worker receives an algorithm operation event, continuously calls a single-step operation function of the WebAssembly wasm to execute the force guidance algorithm on the graph data, and transmits an algorithm result to a web front end to execute rendering until an operation state value of the algorithm operation event reaches a preset threshold value;
the process that the web worker calls the single step operation function of the WebAssembly wasm to execute the force guiding algorithm on the graph data comprises the steps of constructing an octree, determining whether the node degree of a node is larger than a preset degree value or not according to the octree, and determining whether the distance from the node to a corresponding tree node in the octree is larger than a preset length value or not; if yes, calculating the stress of the node according to a first stress formula of the node so as to enable the node to be close to a core area, and filtering remote point operation; otherwise, calculating the stress of the node according to a second stress formula;
the process of constructing the octree includes:
constructing a node memory pool of the octree, and uniformly managing generation and destruction of all nodes;
traversing all nodes, and inserting the nodes into the minimum-size octree of the descendants of the head nodes if the nodes have corresponding tree nodes for insertion in the traversing process; if no corresponding tree node is available for insertion, reading or generating a new tree node from the node memory pool, and reducing the size of the octree by one time; and recursively inserting the nodes, and accumulating the coordinate values of all the sub-nodes under the current node during each insertion.
4. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to execute the computer program to perform the method of laying out the Web-based three-dimensional graph data according to claim 1 or 2.
5. A storage medium having stored therein a computer program, wherein the computer program is configured to execute the Web-based three-dimensional graph data layout method according to claim 1 or 2 when running.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211114172.2A CN115203619B (en) | 2022-09-14 | 2022-09-14 | Web-based three-dimensional graph data layout method and system |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211114172.2A CN115203619B (en) | 2022-09-14 | 2022-09-14 | Web-based three-dimensional graph data layout method and system |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115203619A CN115203619A (en) | 2022-10-18 |
| CN115203619B true CN115203619B (en) | 2022-12-27 |
Family
ID=83572341
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211114172.2A Active CN115203619B (en) | 2022-09-14 | 2022-09-14 | Web-based three-dimensional graph data layout method and system |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115203619B (en) |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110070613A (en) * | 2019-04-26 | 2019-07-30 | 东北大学 | Large-scale three dimensional scene web page display method based on model compression and asynchronous load |
Family Cites Families (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7940279B2 (en) * | 2007-03-27 | 2011-05-10 | Utah State University | System and method for rendering of texel imagery |
| US9183012B2 (en) * | 2012-06-22 | 2015-11-10 | Microsoft Technology Licensing, Llc | Adaptive rendering based on runtime capability check |
| CN106846425B (en) * | 2017-01-11 | 2020-05-19 | 东南大学 | Scattered point cloud compression method based on octree |
| CN109631818B (en) * | 2018-12-21 | 2022-05-27 | 江苏卓月云智能科技有限公司 | Headroom analysis method and device for power transmission line and storage medium |
| CN113468448A (en) * | 2020-03-31 | 2021-10-01 | 腾讯科技（深圳）有限公司 | Page rendering method and device |
| CN111797960A (en) * | 2020-07-13 | 2020-10-20 | 汪金玲 | Multithreading two-dimensional code generation algorithm based on Web Workers |
| CN114564630A (en) * | 2022-02-08 | 2022-05-31 | 杭州欧若数网科技有限公司 | Method, system and medium for visualizing graph data Web3D |
-
2022
- 2022-09-14 CN CN202211114172.2A patent/CN115203619B/en active Active
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110070613A (en) * | 2019-04-26 | 2019-07-30 | 东北大学 | Large-scale three dimensional scene web page display method based on model compression and asynchronous load |
Non-Patent Citations (1)
| Title |
|---|
| 基于插件式3D WebGIS的八叉树空间索引研究;汪玲玲等;《东华理工大学学报(自然科学版)》;20191231(第04期);449-454 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115203619A (en) | 2022-10-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9734149B2 (en) | Clustering repetitive structure of asynchronous web application content | |
| US9229697B2 (en) | Speculative object shapes | |
| US8856060B2 (en) | Creating stream processing flows from sets of rules | |
| US20120079374A1 (en) | Rendering web page text in a non-native font | |
| Bhatele et al. | Heuristic-based techniques for mapping irregular communication graphs to mesh topologies | |
| CN105278946B (en) | A kind of RESTful API method for visualizing | |
| US10133827B2 (en) | Automatic generation of multi-source breadth-first search from high-level graph language | |
| CN114283099A (en) | Method, system and device for processing graph | |
| CN115203619B (en) | Web-based three-dimensional graph data layout method and system | |
| JP7389246B2 (en) | Dependency graph generation method, device, device, storage medium, and program product | |
| Kamil et al. | A local-view array library for partitioned global address space C++ programs | |
| JPH06110703A (en) | Method of compilation | |
| CN110058849A (en) | Generation method, device, computer equipment and the storage medium of flow chart | |
| JP5612556B2 (en) | Applying a passfill algorithm when laying out text around objects | |
| CN112632333A (en) | Query statement generation method, device, equipment and computer readable storage medium | |
| Rodgers et al. | Embedding wellformed Euler diagrams | |
| CN115563355A (en) | Nebula Graph database query method, system, electronic device and medium | |
| CN114218210A (en) | Data processing method and device and electronic equipment | |
| Dong et al. | Dual-level parallelism for deterministic and stochastic CFD problems | |
| US20130179896A1 (en) | Multi-thread processing of an XML document | |
| Giering et al. | Increasing memory locality by executing several model instances simultaneously | |
| Gazzarri et al. | A tool to support FastFlow program design | |
| US20210286644A1 (en) | Reducing complexity of workflow graphs through vertex grouping and contraction | |
| CN114998485B (en) | Method and device for generating graphic combined animation, electronic equipment and storage medium | |
| Özkural | Towards heuristic algorithmic memory |
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 |