A method for implementing custom visual topology graph based on Antv

Abstract

The present invention provides an implementation method of a custom visual topology map based on Antv, characterized in that the implementation method includes: Module 1: a topology device basic information module, which is used to initialize the basic information content of the topology elements and use user-defined device information for drawing; Module 2: a topology map rendering module, which is used for data loading and rendering, and separates data loading and map rendering; Module 3: a topology drag control module, which binds a drag event to each device element; Module 4: a topology link control module, which is used to link elements together; Module 5: a topology map digitization module, which includes data storage and re-acquisition and updating of topology map link information. The present invention provides a method for customizing a topology map based on user-defined device information, without being restricted to a fixed structural style in the topology map; it can be decoupled from its own business; and it can also be combined into a common component to facilitate calling by more other systems.

Description

Technical Field

[0001] The present invention relates to the field of the Internet, and in particular to a method for realizing a custom visual topology map based on Antv. Background Art

[0002] With the advent and development of the internet, topology diagrams have become increasingly common in both development and design. These diagrams can visually illustrate various relationships and clearly explain the composition of various structures. In system development, it's often necessary to display the network topology of devices, commonly known as a network topology diagram.

[0003] The network topology map will automatically generate a physical topology map from a global management perspective to dynamically visualize the structural distribution, link relationships, performance indicators, and operating status of resources. It can also indicate the abnormality level of each resource through color strategies, dynamic traffic, and alarm prompt changes, allowing for rapid fault location.

[0004] There are many ways to create a topology diagram. Software is available for both PCs (such as Visio) and the Web (such as Processoron). However, these diagrams are static and cannot meet the needs of dynamic network topology presentation in systems. For example, services that require dynamic link color settings, dynamic device model selection, and device alarm status display cannot be achieved.

[0005] Antv is a graph visualization engine that provides fundamental graph visualization capabilities, including graph drawing, layout, analysis, interaction, and animation. It aims to make relationships transparent and simple, allowing users to gain insights into relational data. Based on G6, users can quickly build their own graph analysis or editing applications. Summary of the Invention

[0006] The purpose of the present invention is to provide a method for implementing a custom visual topology map based on Antv to solve the problems raised in the above background technology.

[0007] To achieve the above object, the present invention adopts the following technical solutions:

[0008] A method for implementing a custom visual topology map based on Antv, characterized in that the method includes the following five modules: a topology device basic information module, a topology map rendering module, a topology drag control module, a topology link control module, and a topology map digitization module;

[0009] Module 1: Topology device basic information module, used to initialize the basic information content of topology elements. It is also user-defined and extensible information. It uses user-defined device information for drawing, including list presentation and initialization of data association;

[0010] Module 2: Topology map rendering module, used for data loading and rendering, separating data loading and map rendering;

[0011] Module 3: Topology drag control module, which is used to bind drag events to each device element, define parameters and content to expand the desired graphic style;

[0012] Module 4: Topology link control module, used to add actions of moving the mouse onto a topology element and moving the mouse out of it, linking two topology elements together;

[0013] Module 5, topology map digitization module, includes data storage and retrieval and update of topology map link information.

[0014] The topology device basic information module is specifically implemented as follows:

[0015] 1) List presentation:

[0016] a. Extensible device information management. This module is not included in the entire topology module. Instead, there is a separate device management module that expands device information. Conventional information includes device name, device type, device Mac, device code, etc. Extensible information includes device status, device alarm level, device image (graphics displayed in the topology map), etc. This module can be expanded according to actual needs, and complex association configurations can be added, such as whether a device can be associated with other devices or whether it can become a subset device.

[0017] b. Vue is a progressive framework for building user interfaces. In Vue, the fetch function is used to obtain remote device data. These data include name (element name), size (element image size), cid (element unique identification), status (element current status), shape (topological graphic type), etc. Other element information is basically included in the configuration of (a) above. To organize these data, the device extension information in (a) and the remote device data in (b) are divided into an array, and then the front-end coding form (in the page) is used. Method) Draw the obtained array into a list on the page;

[0018] 2) Initialize data association: Draw the devices through the array described in step b and present them in a list. The devices presented in the list should be data that does not appear in the topology. Therefore, when adding or deleting devices in the topology, dynamic trigger events are required to update the associated device data. The method is to use the public component communication eventBus $emit to transmit the triggered data. The data format is

[0019] [{name,label,size,type,cid,ip,mac,status,deplay,typeName,description,manu facture,x:0,y:0,shape:customNode,image,inPoints:[0.5,0.5],outPoints:[0.5,0.5]},{}...].

[0020] The topology rendering module is specifically implemented as follows:

[0021] 1) Topology map container: You need to create a container in HTML to hold the map drawn by G6, usually a div tag. When drawing, G6 will add a canvas tag under the container and then draw the map inside it.

[0022] 2) Topology data preparation: The data source introduced into G6 is an object in JSON format. This object must contain nodes and edges fields, each represented by an array. The nodes array contains node objects, each with a unique ID as a required attribute, and x and y for positioning. The edges array contains edge objects, each with source and target as required attributes, representing the edge's starting and destination IDs, respectively.

[0023] 3) Topology graph instantiation: When instantiating a graph, you must at least set the container, width, and height for the graph. Use G6.Graph to instantiate the topology graph.

[0024] 4) Topology graph rendering: Data loading and graph rendering are two steps that can be performed separately. graph.data(initData) loads data, and graph.render() renders data. Specifically, data loading is performed first and then graph rendering.

[0025] The topology drag control module is specifically implemented as follows:

[0026] 1) When loading the device list in module 1, bind the drag events to each device element, namely the drag start event @dragstart and the drag end event @dragend;

[0027] 2) When the dragstart event is triggered, the dragged device element can be moved, and offsetX and offsetY are obtained in real time to record the current position information after the element stops moving; when the dragend event ends, the topology element addition operation executeCommand and the data association in the linkage module 1 are triggered, and the list information in the update module 1 is updated, that is, the device that has been dragged away is deleted;

[0028] 3) In the above custom executeCommand method, add the required content. If the built-in nodes do not meet the requirements, use the G6.registerNode(nodeName,options,extendedNodeName) method to customize the node.

[0029] 4) Draw a topology diagram and dynamically expand the graph;

[0030] According to Antv G6, addShape can support graphic element types including 'rect', 'circle', 'fan', 'ellipse', 'marker', 'image', 'marker', 'path', 'text', and 'dom(svg)';

[0031] Use addShape to add an image to display the topology element image, that is, the device image information displayed in our topology map; the Attrs parameter is {id, x, y, width, height, img};

[0032] Add text to display topology element description information. The Attrs parameter is {id, x, y, textAlign, textBaseline, lineHeight, text, parent, name, fil};

[0033] Add circle to display real-time status information, and the Attrs parameter is {id, x, y, r, className, fill};

[0034] Add rect to add virtual nodes and virtual control points. The Attrs parameter is {x, y, width, height, fill, stroke, fillOpacity, isRect, opacity, className};

[0035] Add DOM to display custom HTML content, Attrs parameter is {id, x, y, width, height, html};

[0036] You can refer to the above method to define the parameters and content yourself to expand the style of the graphics you want, thereby reflecting dynamic needs.

[0037] The topology link control module is specifically implemented as follows:

[0038] 1) Add actions for moving the mouse over a topology element and moving the mouse out of it. The topology element is the array data of a custom device. When the mouse moves over an element, the topology container of the Graph is obtained through grahp.getContainer. The virtual control node added in the third module is associated with it. The element is displayed or hidden by setting the opacity in the circle. The fill is set to control the color of the virtual node generated by the mouse when it moves over the element, making it easier to view and select.

[0039] 2) Click the topology element with the mouse, associate it with the react virtual node added in module 3, and present it through opacity. Control its style presentation mask, which contains four control points: top, bottom, left, and right. The setItemState method can set the node's state to selected. Select the control point and drag it to change the size of the topology element. When the action stops, use graph.updateItem to update the position and size of the topology element.

[0040] 3) Click the selected element with the mouse to trigger the delete event grahp.removeItem, and update the data association list in the associated module 1;

[0041] 4) Move the mouse over a topological element and click the displayed virtual control node (the virtual control node consists of inPoints and outPoints). Click another topological element again to generate an edge object. Use addShape to add a path to generate a link line. The link line uses the path to generate a straight line, dotted line, curve, Bezier curve, etc.; finally, the two topological elements are linked.

[0042] The topology map digitization module includes data storage and re-acquisition and update of topology map link information, as follows:

[0043] Use the grahp.save() method to obtain the edges and nodes assembly object data, and use the fetch method to save the data remotely. After the data is saved, it is necessary to re-obtain the real-time status information of the device. After obtaining the status information, compare it with the edge set information obtained from the topology graph (obtained by grahp.getEdges). Use graph.update to update the real-time link line information of the topology graph.

[0044] Compared with the prior art, the present invention has the following beneficial effects:

[0045] (1) The present invention provides a method for drawing a topology map based on user-defined device information, without being restricted to a fixed structural style in the topology map.

[0046] (2) The present invention provides a topology map element that can be dynamically expanded during drawing, adding alarm prompt changes, device location, color strategy, dynamic traffic, etc., to achieve rapid fault location. It can be decoupled from its own business (removing the content of module 1).

[0047] (3) Multiple modules can collaborate and be combined into a common component to facilitate calls from more other systems. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] Figure 1 This is the overall page structure diagram of the present invention;

[0049] Figure 2 The topology diagram and business processing flow chart of the present invention;

[0050] Figure 3 This is a flowchart of decoupling business data from the topology diagram of the present invention. DETAILED DESCRIPTION

[0051] The technical solution of the present invention will be clearly and completely described below in conjunction with the accompanying drawings of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0052] Example 1

[0053] like Figure 1-Figure 3 As shown, a method for implementing a custom visual topology map based on Antv is characterized in that the method includes the following five modules: a topology device basic information module, a topology map rendering module, a topology drag control module, a topology link control module, and a topology map digitization module;

[0054] Module 1: Topology device basic information module, used to initialize the basic information content of topology elements. It is also user-defined and extensible information. It uses user-defined device information for drawing, including list presentation and initialization of data association;

[0055] Module 2: Topology map rendering module, used for data loading and rendering, separating data loading and map rendering;

[0056] Module 3: Topology drag control module, which is used to bind drag events to each device element, define parameters and content to expand the desired graphic style;

[0057] Module 4: Topology link control module, used to add actions of moving the mouse onto a topology element and moving the mouse out of it, linking two topology elements together;

[0058] Module 5, topology map digitization module, includes data storage and retrieval and update of topology map link information.

[0059] 1) Environment configuration: This solution needs to be built in the following environment, and requires the Vue3 family bucket framework to be integrated with Antv. The present invention is suitable for display on PC Web.

[0060] 2) The composition of the page frame:

[0061] Using the Vue componentization approach, the entire page is split into three components: a device list module, a topology operation tool module, and a topology map drag and drop display module.

[0062] Assemble the three modules into one page and adjust the layout according to the required position. You can add legend information to the topology map according to business needs, add operation instructions to the tool, and add search and other extensions to the device list.

[0063] 3) Topology diagram business processing flow:

[0064] In Vue, fetch obtains remote device data, splices it in array form, summarizes it with the historical topology information obtained remotely, integrates the currently displayed content, initializes the event monitoring of the topology map (including hoverNode, addEdge, dragItem, selectNode), and renders the topology map

[0065] Drag the device element and execute the handleDrage method after the drag is completed. This method monitors the drag position and the drawing information after the drag is completed.

[0066] Through the virtual control node of the drag element displayed by hoverNode in a, the edge operation is added to multiple drag elements. The properties of the edge can be configured to change the content of the link.

[0067] After completing the above operations, you need to parse all instantiated drag elements drawn in the container, and obtain the edges and nodes assembly object data through the grahp.save() method. Finally, use the Vue fetch method to retain the data and repeat the operation of a to update it.

[0068] 4) Topology diagram non-business data processing flow:

[0069] Customize one or more basic elements according to the standard of elements in Antv G6, i.e. non-dynamic data;

[0070] Repeat steps b, c, and d in step 3).

[0071] The above shows and describes the basic principles, main features, and advantages of the present invention. Those skilled in the art should understand that the present invention is not limited to the above embodiments. The above embodiments and descriptions are merely preferred examples of the invention and are not intended to limit the present invention. Various changes and improvements may be made to the present invention without departing from the novel spirit and scope of the present invention. Such changes and improvements fall within the scope of the invention claimed. The scope of protection claimed in the present invention is defined by the appended claims and their equivalents.

Claims

1. A method for implementing a custom visual topology map based on Antv, characterized in that: Its implementation method includes the following five modules: topology device basic information module, topology map rendering module, topology drag control module, topology link control module, and topology map digitization module; Module 1: Topology device basic information module, used to initialize the basic information content of topology elements. It is also user-defined and extensible information. It uses user-defined device information for drawing, including list presentation and initialization of data association; Module 2: Topology map rendering module, used for data loading and rendering, separating data loading and map rendering; Module 3: Topology drag control module, which is used to bind drag events to each device element, define parameters and content to expand the desired graphic style; Module 4: Topology link control module, used to add actions of moving the mouse onto a topology element and moving the mouse out of it, linking two topology elements together; Module 5: Topology map digitization module, including data storage and retrieval of updated topology map link information; The topology device basic information module is specifically implemented as follows: 1) List presentation: a. Conventional information includes device name, device type, device Mac, and device code. Extensible information includes device status, device alarm level, and device image. This information can be expanded based on actual needs to include whether the device is associated with other devices and whether it is a subset device for complex association configuration. b. Get remote device data through fetch in Vue. The device data includes element name, element image size, element unique identification, element current state, topology type, and other element information included in the configuration of a above. Organize this data into an array, and then traverse the page to draw the required list; 2) Initialize data association: The devices presented in the list are data that does not appear in the topology. Therefore, when adding or deleting devices in the topology, dynamic trigger events are required to update the associated device data. The method is to use custom events of the public component communication event bus (eventBus) to transmit the triggered data. The data format is: [{name,label,size,type,cid,ip,mac,status,deplay,typeName,description,manufacturing,x:0,y:0,shape:customNode,image,inPoints:[0.5,0.5],outPoints:[0.5,0.5]},{}].

2. The method for implementing a custom visual topology map based on Antv according to claim 1, characterized in that: The topology rendering module is specifically implemented as follows: 1) Topology graph container: You need to create a container in HTML to hold the graph drawn by G6. When drawing, G6 will add a canvas tag under the container and then draw the graph inside it. 2) Topology data preparation: The data source introduced into G6 is an object in JSON format. The object must contain node and edge fields, represented by arrays. The nodes array contains node objects. The unique ID is a required attribute of each node object, and x and y are used for positioning. The edges array contains edge objects. The source and target are required attributes of each edge, representing the ID of the starting point and the target point, respectively. 3) Topology graph instantiation: When instantiating a graph, you need to set at least the container, width, and height for the graph; Use G6.Graph to instantiate the topology graph; 4) Topology graph rendering: Loading data and rendering the graph are two separate steps. graph.data(initData) loads data, and graph.render() renders data.

3. The method for implementing a custom visual topology map based on Antv according to claim 1, characterized in that: The topology drag control module is specifically implemented as follows: 1) When loading the device list in module 1, bind the drag events to each device element, namely the drag start event @dragstart and the drag end event @dragend; 2) When the @dragstart event is triggered, the dragged device element moves, and offsetX and offsetY are obtained in real time to record the current position information after the element stops moving; @dragend When the drag ends, it is necessary to trigger the topology element addition operation executeCommand and the data association update in the linkage module 1, and update the list information in the module 1, that is, delete the device that has been dragged away; 3) In the executeCommand method above, add the required content. If the built-in nodes do not meet your needs, use the G6.registerNode(nodeName,options,extendedNodeName) method to create a custom node. 4) Draw a topology diagram and dynamically expand the graph According to Antv G6, addShape supports the following graphic element types: 'rect', 'circle', 'fan', 'ellipse', 'marker', 'image', 'path', 'text', and 'dom(svg)'. Use addShape to add an image to display the topology element image, that is, the device image information displayed in the topology map; the Attrs parameter is {id, x, y, width, height, img}; Add text to display topology element description information. The Attrs parameter is {id, x, y, textAlign, textBaseline, lineHeight, text, parent, name, fil}; Add circle to display real-time status information, and the Attrs parameter is {id, x, y, r, className, fill}; Add rect to add virtual nodes and virtual control points. The Attrs parameter is {x, y, width, height, fill, stroke, fillOpacity, isRect, opacity, className}; Add DOM to display custom HTML content, Attrs parameter is {id, x, y, width, height, html}.

4. The method for implementing a custom visual topology map based on Antv according to claim 1, characterized in that: The topology link control module is specifically implemented as follows: 1) Add actions for moving the mouse over a topological element and for moving the mouse out of it. When the mouse moves over an element, use grahp.getContainer to obtain the DOM container of the Graph. Associate the virtual control node added in module 3. Set the opacity in the circle to show or hide the element. Set fill to control the color of the virtual node generated when the mouse moves over the element, making it easier to view and select. 2) Click the topology element with the mouse, associate it with the react virtual node added in module 3, and present it through opacity. Control its style to present a masked form containing four control points for up, down, left, and right operations. Use the setItemState method to set the node's state to selected. Select the control point and drag it to change the size of the topology element itself. When the action stops, use graph.updateItem to update the position and size of the topology element. 3) Click the selected element with the mouse to trigger the delete event grahp.removeItem, and update the data association list in the associated module 1; 4) Move the mouse over a topological element and click the displayed virtual control node. Click another topological element again to generate an edge object. Use addShape to add a path to generate a link line. The link line uses the path to generate a straight line, dotted line, curve, or Bezier curve. Finally, the two topological elements are linked.

5. The method for implementing a custom visual topology map based on Antv according to claim 1, characterized in that: The topology map digitization module includes data storage and re-acquisition and update of topology map link information, as follows: Use the grahp.save() method to obtain the edges and nodes assembly object data, and use the fetch method to save the data remotely. After the data is saved, it is necessary to re-obtain the real-time status information of the device. After obtaining the status information, compare it with the edge set information obtained from the topology graph, and use graph.update to update the real-time link line information of the topology graph.

Images