A method for multi-dimensionally displaying network graph properties and interaction through configuration data

Abstract

The application provides a method for multi-dimensionally displaying network diagram characteristics and interaction through configuration data, and relates to the technical field of network planning. The method specifically comprises the following steps: encapsulating a method for acquiring flowchart data under multiple perspectives, setting corresponding default node attribute data through different research perspective data, matching different background interfaces, calling interfaces to acquire network diagram data, drawing network diagrams and rendering them. The method for re-rendering network diagrams and legends when a user switches node text attribute data, node size attribute data and node color attribute data is encapsulated, the network diagram is destroyed, each attribute data of the network diagram nodes is re-assigned, and the network diagram is re-rendered. Then, the user can interact with the network diagram, zoom in or out, translate, and view detailed information of the nodes by clicking the mouse. The application improves the code reusability, facilitates the modification of internal codes, has strong maintainability, makes the user operation simple and fast, improves the flexibility of the network diagram, simplifies the codes, has high data accuracy and strong applicability.

Description

Technical Field

[0001] This invention relates to the field of network planning technology, and in particular to a method for displaying network graphs and interactions in multiple dimensions through configuration data. Background Technology

[0002] With the rapid development of research and information technology across various disciplines globally, research on analyzing millions or more of large datasets using computer languages ​​has become possible. Experts and scholars are no longer limited to traditional methods for studying the attributes, characteristics, or development patterns of single elements, but are increasingly inclined to use novel and advanced analytical methods to analyze the relationships between things, thereby providing strategic guidance. Network analysis is one such novel and advanced data analysis method, using the construction of connections between nodes for data analysis and prediction. Therefore, the demand for data visualization of network science research results has surged. Many significant studies are based on a global perspective, requiring multi-dimensional network analysis of data to obtain comprehensive and strategically significant results, thus generating a large demand for multi-dimensional network graph visualization of computational results. Developing a universal method to meet the data visualization needs of researchers and implement interactive network graphs in web pages is urgently needed.

[0003] From the perspective of result display alone, there are various plugins for implementing network diagrams in web front-end interface development, such as echarts, D3.js, Vue G6, and jsPlumb. Each of these plugins has its advantages and disadvantages. For example, echarts source code is simple, easy to understand, and easy to use, but it can only display and cannot be interactive, which greatly limits the functionality of network diagrams. jsPlumb can flexibly implement the editing of network diagrams from scratch, but it requires a certain level of front-end development knowledge and is more difficult. D3.js draws graphics in vector format and renders them on the page as elements, making them controllable and interactive, and enabling flexible display of network diagrams.

[0004] Because the results of scientific research contain a large amount of node data, connection data, node attribute data, and connection attribute data, and in combination with our visualization needs for scientific research results, we need to display hundreds of multi-dimensional network graphs containing a large number of nodes and connections. In the past, we had to write a method for each dimension and each node attribute combination. This not only resulted in a large amount of development work, but also caused code chaos, high repetition, high difficulty in later maintenance, and high time and manpower costs. Summary of the Invention

[0005] The technical problem to be solved by the present invention is to address the shortcomings of the prior art by providing a method for displaying network graphs and interactions in multiple dimensions through configuration data.

[0006] To solve the above-mentioned technical problems, the technical solution adopted by the present invention includes the following process:

[0007] S1: Encapsulates the method for rendering flowchart data from multiple perspectives;

[0008] S2: Encapsulate the method for re-rendering the network graph when the user switches node attribute data;

[0009] S3: Encapsulates the methods for drawing, rendering, and interacting with network graphs.

[0010] Furthermore, S1 specifically includes:

[0011] Step S1.1: Enter the SDG Network Results Display Platform and select a research perspective, which includes: world level, national group level, and national level.

[0012] The SDG network results display platform interface consists of three parts: the left menu bar is the research perspective, including the world level, national group level, and national level; the middle part is the network diagram display area, including the network diagram, legend, and timeline; and the right part is the node attributes, including node title, node size, and node color.

[0013] Step S1.2: Use the Web front-end interface development tool to obtain the research perspective data selected by the user, assign the research perspective data to the perspective variable, and save the research perspective data to the global scope.

[0014] Step S1.3: Set default values ​​for the text, size, and color attributes of the network graph nodes based on the menu data selected by the current user;

[0015] Step S1.4: Based on the research perspective data selected by the current user, call the corresponding network graph data interface and assign the data returned by the interface to the node and connection data of the network graph;

[0016] Step S1.5: Select and delete all vector graphics on the webpage to destroy the original webpage;

[0017] Step S1.6: Based on the research perspective data, make conditional judgments and render the network diagram using the network diagram drawing method;

[0018] Step S1.7: Draw the network graph based on the assigned network graph nodes and connection data.

[0019] Furthermore, S2 specifically includes:

[0020] Step S2.1: In the SDG network achievement display platform, users can select custom network graph node text, node size, and node color by clicking with the mouse, and use the Web front-end interface development tool to obtain the network graph node text, node size, and node color attribute data.

[0021] Step S2.2: Reassign values ​​to the node attribute data, assigning the node text, node size, and node color data selected by the user to the data bound to the node text, node size, and node color attributes in the network diagram drawing method, respectively;

[0022] Step S2.3: Save the assigned node text, node size, and node color data to the global cache;

[0023] Step S2.4: Select and delete all vector graphics on the webpage to destroy the network diagram in the current interface;

[0024] Step S2.5: Determine whether the user has changed the node color attribute data based on the node color attribute data. If the user has changed the node color attribute data, assign the current network graph node data to the node color attribute data and proceed to step S2.6; if the user has not changed the node color attribute data, proceed to step S2.7.

[0025] Step S2.6: Perform conditional judgment on the assigned node color attribute data, select the field of the node color to be rendered, and execute step S2.9;

[0026] Step S2.7: Determine whether the user has changed the node text attribute data based on the node text attribute data. If the user has changed the node text attribute data, proceed to step S2.9; if the user has not changed the node text attribute data, proceed to step S2.8.

[0027] Step S2.8: Determine whether the user has changed the node size attribute data based on the node size attribute data. If the user has changed the node size attribute data, return node size data with different scaling levels based on the node size attribute data; if the user has not changed the node size attribute data, proceed to step S2.9.

[0028] Step S2.9: Draw a network diagram based on the node attribute data.

[0029] Furthermore, S3 includes:

[0030] Step S3.1: Users select a research perspective or switch network graph node attribute data in the SDG network results display platform;

[0031] Step S3.2: Using the Web front-end interface development tool, determine the corresponding network graph data interface to call based on the network graph data selected by the current user, and assign the network graph node and connection data returned by the interface to the network graph data;

[0032] Step S3.3: Obtain the width and height of the current webpage canvas and center the network diagram.

[0033] Step S3.4: Create a network graph using connection data and node ID information, specifying connection force, connection width, connection length, and connection strength.

[0034] Step S3.5: Create a force-guided graph model using node data, set repulsive force, centripetal force, and spring force, and add scalable vector graphics (SVG) to the canvas, as well as network graph interaction methods to control the translation and scaling of elements and text;

[0035] Step S3.6: Add straight lines and curves, and render different colored lines based on the connection ID and color data using the network diagram connection data;

[0036] Step S3.7: Add a node, and render the node size and fill color according to the node size and color data bound to the node attributes;

[0037] Step S3.8: Add node text, render the node text according to the node text attribute data, and set the node text style according to the node size and node color attribute data;

[0038] Step S3.9: Add a mouse event to the node text so that when the user hovers the mouse over the node, an information box pops up to view the name of the scientific data grid (SDG) sub-target corresponding to the node, the specific content of the sub-target, and the indicator value.

[0039] Step S3.10: Add legend title and legend based on node color attribute data;

[0040] Step S3.11: Render the positions of each node, line, curve, and node text on the canvas according to the node position coordinate information in the node data;

[0041] Step S3.12: Render the SVG in the interface to obtain the network graph.

[0042] The beneficial effects of adopting the above technical solution are as follows:

[0043] This invention encapsulates methods for acquiring network graph data of different dimensions, setting default node attributes, and rendering network graphs, improving code reusability, facilitating internal code modification, and enhancing maintainability. Data is directly bound to network graph node attributes, allowing users to easily switch node attributes through simple selection operations. This is simple, fast, and improves the flexibility of the network graph, while also simplifying the code and ensuring high data accuracy. Furthermore, this invention provides a network graph interaction method, enabling users to directly obtain information about nodes and connections in network graphs of different dimensions through mouse operations, offering strong applicability and a one-time solution. Attached Figure Description

[0044] Figure 1 This is a flowchart illustrating the encapsulation of the multi-view rendering method for different types of network graphs in this invention.

[0045] Figure 2 This is a flowchart illustrating the multi-dimensional display of network graphs based on user-defined node attribute data in this invention.

[0046] Figure 3 This is a flowchart encapsulating the method for rendering and interacting with network graphs according to the present invention. Detailed Implementation

[0047] The specific embodiments of the present invention will be described in further detail below with reference to the accompanying drawings and examples. The following examples are for illustrative purposes only and are not intended to limit the scope of the invention.

[0048] In this embodiment, WebStorm is selected as the web front-end interface development tool, and Vue + D3.js + ElementUI is configured as the development framework and plugins for method design. The specific steps include:

[0049] S1: Encapsulates the method for rendering flowchart data from multiple perspectives;

[0050] S2: Encapsulate the method for re-rendering the network graph when the user switches node attribute data;

[0051] S3: Encapsulates the methods for drawing, rendering, and interacting with network graphs;

[0052] In this embodiment, as Figure 1 As shown, S1 specifically includes:

[0053] Step S1.1: Enter the SDG Network Results Display Platform and select a research perspective, which includes: world level, national group level, and national level.

[0054] The SDG network results display platform interface consists of three parts: the left menu bar displays research perspectives, including the world level, national group level, and national level; the middle part is the network diagram display area, which includes the network diagram, legend, and timeline; and the right part displays node attributes, including node title, node size, and node color, so as to interact with users and view the network diagram results from multiple dimensions.

[0055] Step S1.2: Use the Web front-end interface development tool to obtain the research perspective data selected by the user, assign the research perspective data to the perspective variable, and save the research perspective data to the global scope.

[0056] Step S1.3: Set default values ​​for the text, size, and color attributes of the network graph nodes based on the menu data selected by the current user;

[0057] Step S1.4: Based on the research perspective data selected by the current user, call the corresponding network graph data interface and assign the data returned by the interface to the node and connection data of the network graph;

[0058] Step S1.5: Select and delete all vector graphics on the webpage to destroy the original webpage;

[0059] Step S1.6: Based on the research perspective data, make conditional judgments and render the network diagram using the network diagram drawing method;

[0060] Step S1.7: Draw the network graph based on the assigned network graph nodes and connection data.

[0061] The method described in this embodiment is applicable to displaying network graph results from any perspective, improving its versatility and flexibility. It determines whether to request network graph data from different research perspectives based on the research perspective data, resulting in clear, concise, and highly accurate code. Encapsulating different types of network graph drawing methods improves code security and significantly increases development efficiency. The encapsulated method is easy to maintain and highly reusable.

[0062] In this embodiment, as Figure 2 As shown, S2 specifically includes:

[0063] Step S2.1: In the SDG network results display platform, users can select custom network diagram node text, node size, and node color by clicking with the mouse, and use the Web front-end interface development tool to obtain the network diagram node text, node size, and node color attribute data.

[0064] Step S2.2: Reassign values ​​to the node attribute data, assigning the node text, node size, and node color data selected by the user to the data bound to the node text, node size, and node color attributes in the network diagram drawing method, respectively;

[0065] Step S2.3: Save the assigned node text, node size, and node color data to the global cache;

[0066] Step S2.4: Select and delete all vector graphics on the webpage to destroy the network diagram in the current interface;

[0067] Step S2.5: Determine whether the user has changed the node color attribute data based on the node color attribute data. If the user has changed the node color attribute data, assign the current network graph node data to the node color attribute data and proceed to step S2.6; if the user has not changed the node color attribute data, proceed to step S2.7.

[0068] Step S2.6: Perform conditional judgment on the assigned node color attribute data, select the field of the node color to be rendered, and execute step S2.9;

[0069] Step S2.7: Determine whether the user has changed the node text attribute data based on the node text attribute data. If the user has changed the node text attribute data, proceed to step S2.9; if the user has not changed the node text attribute data, proceed to step S2.8.

[0070] Step S2.8: Determine whether the user has changed the node size attribute data based on the node size attribute data. If the user has changed the node size attribute data, return node size data with different scaling levels based on the node size attribute data; if the user has not changed the node size attribute data, proceed to step S2.9.

[0071] Step S2.9: Draw a network diagram based on the node attribute data.

[0072] The method described in this embodiment is applicable to any network graph developed using D3.js as a plugin, demonstrating strong versatility. Users can re-render the network graph and view results from other dimensions by clicking with the mouse, making the operation simple and providing a good interactive experience. This method directly displays node information from different dimensions on the network graph nodes, making the comparative analysis of information from various nodes in different network graphs clear, concise, and accurate for users. It also enables immediate re-rendering of the network graph after users switch node attribute data, allowing them to view multi-dimensional network graphs rendered with various combinations of node text, size, and color data, thus improving the flexibility of network graph rendering.

[0073] In this embodiment, as Figure 3 As shown, S3 specifically includes:

[0074] Step S3.1: Users select a research perspective or switch network graph node attribute data in the SDG network results display platform;

[0075] Step S3.2: Using the Web front-end interface development tool, determine the corresponding network graph data interface to call based on the network graph data selected by the current user, and assign the network graph node and connection data returned by the interface to the network graph data;

[0076] Step S3.3: Obtain the width and height of the current webpage canvas and center the network diagram.

[0077] Step S3.4: Create a network graph using connection data and node ID information, specifying connection force, connection width, connection length, and connection strength.

[0078] Step S3.5: Create a force-guided graph model using node data, set repulsive force, centripetal force, and spring force, and add scalable vector graphics (SVG) to the canvas, as well as network graph interaction methods to control the translation and scaling of elements and text;

[0079] Step S3.6: Add straight lines and curves, and render different colored lines based on the connection ID and color data using the network diagram connection data;

[0080] Step S3.7: Add a node, and render the node size and fill color according to the node size and color data bound to the node attributes;

[0081] Step S3.8: Add node text, render the node text according to the node text attribute data, and set the node text style according to the node size and node color attribute data;

[0082] Step S3.9: Add a mouse event to the node text so that when the user hovers the mouse over the node, an information box pops up to view the name of the scientific data grid (SDG) sub-target corresponding to the node, the specific content of the sub-target, and the indicator value.

[0083] Step S3.10: Add legend title and legend based on node color attribute data;

[0084] Step S3.11: Render the positions of each node, line, curve, and node text on the canvas according to the node position coordinate information in the node data;

[0085] Step S3.12: Render the SVG in the interface to obtain the network graph.

[0086] The method described in this embodiment is applicable to any network graph rendering based on D3.js, with no limit on the amount of data and strong versatility; it allows for viewing a large number of network graphs from multiple perspectives and dimensions, with clear and intuitive data binding and reliable network graph results; the encapsulation of the network graph rendering method greatly simplifies the code structure and reduces development workload and later upgrade and maintenance costs.

[0087] In summary, the method in this embodiment primarily implements a method for re-rendering network graphs by switching node attributes interactively from multiple research perspectives. This method rapidly generates a large number of network graphs by encapsulating methods for acquiring different types of network graph data from multiple research perspectives, rendering network graphs, and user interaction methods. This method drives the automatic updating of the network graph through changes in node attribute data, allowing users to view clear, intuitive, and accurate network graph results with different combinations of node attribute data through simple operations, greatly improving the user experience. The encapsulated method is highly flexible, widely applicable, and has low maintenance costs, making it suitable for widespread use.

[0088] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some or all of the technical features therein; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the scope defined by the claims of the present invention.

Claims

1. A method for displaying network graph characteristics and interactions from multiple dimensions through configuration data, characterized in that: The process includes the following: S1: A method for encapsulating and rendering flowchart data from multiple perspectives; S2: Encapsulates a method for re-rendering the network graph when the user switches node attribute data; Step S2.1: In the SDG network results display platform, users can select custom network diagram node text, node size, and node color by clicking with the mouse, and use the Web front-end interface development tool to obtain the network diagram node text, node size, and node color attribute data. Step S2.2: Reassign values ​​to the node attribute data, assigning the node text, node size, and node color data selected by the user to the data bound to the node text, node size, and node color attributes in the network diagram drawing method, respectively; Step S2.3: Save the assigned node text, node size, and node color data to the global cache; Step S2.4: Select and delete all vector graphics on the webpage to destroy the network diagram in the current interface; Step S2.5: Determine whether the user has changed the node color attribute data based on the node color attribute data. If the user has changed the node color attribute data, assign the current network graph node data to the node color attribute data and proceed to step S2.6; if the user has not changed the node color attribute data, proceed to step S2.

7. Step S2.6: Perform conditional judgment on the assigned node color attribute data, select the field of the node color to be rendered, and execute step S2.9; Step S2.7: Determine whether the user has switched the node text attribute data based on the node text attribute data. If the user has switched the node text attribute data, proceed to step S2.

9. If the user does not switch the node text attribute data, proceed to step S2.8; Step S2.8: Determine whether the user has changed the node size attribute data based on the node size attribute data. If the user has changed the node size attribute data, return node size data with different scaling levels based on the node size attribute data; if the user has not changed the node size attribute data, proceed to step S2.

9. Step S2.9: Draw a network graph based on the node attribute data; S3: Encapsulates methods for drawing, rendering, and interacting with network graphs.

2. The method for displaying network graph characteristics and interactions in multiple dimensions through configuration data according to claim 1, characterized in that: The network graph in step S2 includes nodes, connections, and legend.

3. The method for displaying network graph characteristics and interactions in multiple dimensions through configuration data according to claim 1, characterized in that: The node attributes in S2 include: node text attribute, node size attribute, and node color attribute.

4. The method for displaying network graph characteristics and interactions in multiple dimensions through configuration data according to claim 1, characterized in that: Specifically, S1 also includes: Step S1.1: Enter the SDG network results display platform and select a research perspective; Step S1.2: Use the Web front-end interface development tool to obtain the research perspective data selected by the user, assign the research perspective data to the perspective variable, and save the research perspective data to the global scope. Step S1.3: Set default values ​​for the text, size, and color attributes of the network graph nodes based on the menu data selected by the current user; Step S1.4: Based on the research perspective data selected by the current user, call the corresponding network graph data interface and assign the data returned by the interface to the node and connection data of the network graph; Step S1.5: Select and delete all vector graphics on the webpage to destroy the original webpage; Step S1.6: Based on the research perspective data, make conditional judgments and render the network diagram using the network diagram drawing method; Step S1.7: Draw the network graph based on the assigned network graph node and connection data.

5. The method for displaying network graph characteristics and interactions in multiple dimensions through configuration data according to claim 4, characterized in that: In step S1.1: the SDG network results display platform interface includes three parts: the left menu bar is the research perspective, including the world level, national group level, and national level; the middle part is the network diagram display area, including the network diagram, legend, and timeline; the right part is the node attributes, including node title, node size, and node color.

6. The method for displaying network graph characteristics and interactions in multiple dimensions through configuration data as described in claim 4, characterized in that: The web front-end interface development tool is Webstorm, configured with Vue, D3.js, and ElementUI.

7. The method for displaying network graph characteristics and interactions in multiple dimensions through configuration data according to claim 1, characterized in that: Specifically, S3 also includes: Step S3.1: Users select a research perspective or switch network graph node attribute data in the SDG network results display platform; Step S3.2: Using the Web front-end interface development tool, determine the corresponding network graph data interface to call based on the network graph data selected by the current user, and assign the network graph node and connection data returned by the interface to the network graph data; Step S3.3: Obtain the width and height of the current web page canvas to center the network graph; Step S3.4: Create a network graph with connection force, connection width, connection length, and connection strength using the connection data and node ID information; Step S3.5: Create a force-guided graph model using the node data, set repulsive force, centripetal force, and spring force, and add scalable vector graphics (SVG) to the canvas, as well as a network graph interaction method to control the translation and scaling of elements and text; Step S3.6: Add straight lines and curves, and render different colored lines based on the connection ID and color data using the network graph connection data; Step S3.7: Add a node, and render the node size and fill color according to the node size and color data bound to the node attributes; Step S3.8: Add node text, render the node text according to the node text attribute data, and set the node text style according to the node size and node color attribute data; Step S3.9: Add a mouse event to the node text so that when the user hovers the mouse over the node, an information box pops up to view the name of the scientific data grid (SDG) sub-target corresponding to the node, the specific content of the sub-target, and the indicator value. Step S3.10: Add a legend title and legend based on the node color attribute data; Step S3.11: Render the positions of each node, line, curve, and node text on the canvas according to the node position coordinate information in the node data; Step S3.12: Render the SVG in the interface to obtain the network graph.

Images