CN114048110A - Method for realizing customized visual topological graph based on Antv - Google Patents

Abstract

The invention provides a method for realizing a custom visual topological graph based on Antv, which is characterized by comprising the following steps: a first module: the topological device basic information module is used for initializing the basic information content of the topological element and drawing by adopting user-defined device information; the second module is a topological graph rendering module which is used for loading and rendering data and separately loading the data and rendering the graph; the third module is a topology dragging control module and binds a dragging event to each equipment element; the module IV is a topological link control module used for linking elements; and the fifth module is a topological graph datamation module, and comprises data storage and the step of reacquiring and updating the topological graph link information. The invention provides a method for customizing a topological graph according to user-defined equipment information, which is not limited by a fixed structural style in the topological graph; can be decoupled from the self service; or can be combined together into a common component, so that more other systems can be called conveniently.

Description

Method for realizing customized visual topological graph based on Antv

Technical Field

The invention relates to the field of Internet, in particular to a method for realizing a customized visual topological graph based on Antv.

Background

With the appearance and development of the internet era, no matter development or design, a topological graph can be used, and the topological graph can visually present various relationships and make people understand the composition of various structures at a glance. In system development, the network topology of the device is often required to be shown, which is commonly referred to as a network topology.

The network topological graph starts from a global management view, a physical topological graph is automatically generated, the structural distribution, the link relation, the performance index, the running state and the like of the resources are visually and dynamically displayed, the abnormal level of each resource can be represented through a color strategy, dynamic flow and alarm prompt change, and the fault can be quickly positioned.

The topology map can be completed in many ways, and there are available software for both PC (e.g. visio) and Web (e.g. processon), but such map is static and cannot satisfy the need of dynamic network topology map presentation in the system. If the need is provided according to the self service, such as dynamic setting of link color, dynamic type selection of equipment model, presentation of equipment alarm state and the like, can not be finished.

Antv is a graph visualization engine that provides the basic capability for graph visualization for drawing, layout, analysis, interaction, animation, etc. of graphs. The relationship is intended to be transparent and simple. Let the user obtain the Insight of the relationship data. Based on G6, the user can quickly build his own graph analysis or graph editing application.

Disclosure of Invention

The invention aims to provide a method for realizing a custom visual topological graph based on Antv, so as to solve the problems in the background technology.

In order to achieve the purpose, the invention adopts the following technical scheme:

an implementation method of a custom visualization topological graph based on Antv is characterized by comprising the following 5 modules: the system comprises a topological equipment basic information module, a topological graph rendering module, a topological dragging control module, a topological link control module and a topological graph datamation module;

a first module: the topology equipment basic information module is used for initializing the basic information content of the topology elements and also is user-defined extensible information, and drawing by adopting the user-defined equipment information, including list presentation and initialization data association;

the second module is a topological graph rendering module which is used for loading and rendering data and separately loading the data and rendering the graph;

the topology dragging control module is used for binding a dragging event with each equipment element, and defining parameters and contents to expand patterns required by the graphics;

the module IV is a topological link control module and is used for increasing the action of moving the mouse to the topological elements and the action of moving the mouse out and linking the two topological elements;

and the fifth module is a topological graph datamation module, and comprises data storage and the step of reacquiring and updating the topological graph link information.

The basic information module of the topology equipment is specifically realized by the following steps:

1) and (3) presenting the list:

a. the method comprises the steps of expandable equipment information management, wherein the module is not contained in a whole topological graph module, but is provided with a single equipment management module, the module expands equipment information, the conventional equipment information comprises an equipment name, an equipment type, an equipment Mac, an equipment coding code and the like, the expandable information comprises the state of the equipment, the alarm level of the equipment, the picture image (a graph shown in a topological graph) of the equipment and the like, and the expandable information is expanded according to actual requirements, and the expandable equipment information can be added, such as whether the equipment can be associated with other equipment or not, whether the equipment can become a complex associated configuration such as subset equipment or not;

b. vue is a set of progressive framework for constructing user interface, in vue, remote device data is obtained through catch function, the data includes name (element name), size (element picture size), cid (element unique identification), status (element current state), shape (topological graph type), and other element information, all of which are basically contained in the above configuration (a), the data is sorted, the device extension information in (a) and the remote device data in (b) are divided into an array, and then the obtained array is drawn into a list in the page by adopting front end coding (the < ul > mode in the page);

2) initializing data association: drawing the equipment through the array in the step b, presenting the equipment in the list, wherein the equipment presented in the list is data which does not appear in the topology, so that when equipment is added or deleted in the topological graph, a dynamic trigger event is needed to update associated equipment data, namely, the triggered data is transmitted by adopting $ emit of communication event bus of a public component, and the data format is

[{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]},{}...]。

The specific implementation method of the topological graph rendering module is as follows:

1) topology container: a container, typically a div tag, needs to be created in HTML to hold the graph drawn by G6; g6 adds canvas label under the container when drawing, and then draws the graph therein;

2) preparing topological graph data: the data source of the G6 is introduced into an object in a JSON format; the object needs to have node (nodes) and edge (edges) fields which are respectively expressed by arrays; the nodes object is contained in the nodes array, the unique id is the necessary attribute in each node object, and x and y are used for positioning; the edges array contains edge objects, and source and target are necessary attributes of each edge and respectively represent a starting point id and a target point id of the edge;

3) instantiation of the topological graph: when a diagram is instantiated, at least a container, a width and a height need to be set for the diagram; instantiating the topology graph by adopting G6. graph;

4) rendering a topological graph: the data loading and the graph rendering are two steps, which can be performed separately, wherein graph, data (initData) loads data, and graph, render () renders data, specifically, data is loaded first and then graph rendering is performed.

The specific implementation method of the topology drag control module is as follows:

1) when equipment list loading is carried out in the module I, a dragging event is bound to each equipment element, namely a dragging start event @ dragstart and a dragging end event @ dragend respectively;

2) the dragged equipment element can move when the dragstart event starts to trigger, and offset X and offset Y are acquired in real time and used for recording the current position information after the element stops moving; when the dragand is finished, triggering a topology primitive element adding operation executeCommand and data association updating in a linkage module I, updating list information in the module I, namely deleting the equipment which is dragged and removed;

3) in the method for customizing execuutecomm, add the content that add needs to be completed, when the built-in node does not meet the requirement, customize the node by the method of G6.register node (nodeName, options, exendedNode);

4) drawing a topological graph dynamic expansion graph;

the primitive pixel types that can be supported according to addShape in Antv G6 include 'rect', 'circle', 'fan', 'ellise', 'marker', 'image', 'marker', 'path', 'text', 'dom (svg');

adding an image through addShape for displaying a topological element picture, namely device picture information displayed in the topological graph; the Attrs parameter is { id, x, y, width, height, img };

adding text for displaying the description information of the topological elements, wherein the Attrs parameters are { id, x, y, textAlign, textBaseline, lineHeight, text, parent, name and file };

adding circle for displaying real-time state information, wherein the Attrs parameter is { id, x, y, r, className, fill };

adding rect for adding virtual nodes and virtual control point positions, wherein the Attrs parameters are { x, y, width, height, fill, stroke, fillovisity, isRect, options, className };

adding dom for displaying the content of the custom html, wherein the Attrs parameters are { id, x, y, width, height, html };

the method can define parameters and contents by self to expand the pattern required by the graph, thereby reflecting the dynamic requirement.

The specific implementation method of the topology link control module is as follows:

1) adding an action of moving a mouse to a topological element and a mouse moving-out action, wherein the topological element is array data of self-defined equipment, the mouse is moved to the upper surface of the element, a topological Graph container of the Graph is obtained through grahp.

2) Clicking the topological element by a mouse, associating the exact virtual node added in the module III, presenting through options, controlling the style presentation mask form to comprise four operable control points, namely an upper control point, a lower control point, a left control point, a right control point and a left control point, selecting the control point to drag, changing the size of the topological element, and updating the position and the size of the topological element by using graph.

3) Clicking the selected element by a mouse, triggering a deletion event, namely, a grahp.removeItem, and updating a data association list in the association module I;

4) moving a mouse point to the top of the topological element, clicking the presented virtual control node (the virtual control node is composed of InPoints and outPoints), clicking other topological elements again to generate an edge object, adding a path through addShape to generate a link line, and generating a straight line, a dotted line, a curve, a Bezier curve and the like by using the path of the path through the link line; finally the two topological elements are linked.

The topological graph datamation module comprises data storage and reacquiring and updating topological graph link information, and the method specifically comprises the following steps:

acquiring edge and node assembly object data by a grahp.save () method, remotely storing the data by a catch mode, acquiring real-time state information of equipment again after the data is stored, comparing the acquired state information with edge set information (acquired by grahp.getedges) acquired by a topological graph, and updating the real-time link line information of the topological graph by a grahp.update.

Compared with the prior art, the invention has the beneficial effects that:

(1) the invention provides the drawing of the topological graph according to the user-defined equipment information, and the drawing is not limited by the fixed structural style in the topological graph.

(2) The topological graph elements provided by the invention can be dynamically expanded in drawing, such as alarm prompt change, equipment position, color strategy, dynamic flow and the like are added, and the fault is quickly positioned. It can be decoupled from its own traffic (removing the contents of module one).

(3) The multiple modules cooperate with each other, and can be combined together to form a common component, so that more other systems can be called conveniently.

Drawings

FIG. 1 is a general page structure of the present invention;

FIG. 2 is a flowchart of the topology and business processing of the present invention;

fig. 3 is a flowchart of the topology decoupling service data of the present invention.

Detailed Description

The technical solutions of the present invention will be described clearly and completely with reference to the accompanying drawings, and it is to be understood that the described embodiments are only a part of the embodiments of the present invention, and not all embodiments, and all other embodiments obtained by those skilled in the art without any inventive work based on the embodiments of the present invention belong to the scope of the present invention.

Example 1

As shown in fig. 1 to fig. 3, an implementation method of a customized visual topological graph based on Antv is characterized in that the implementation method includes the following 5 modules: the system comprises a topological equipment basic information module, a topological graph rendering module, a topological dragging control module, a topological link control module and a topological graph datamation module;

a first module: the topology equipment basic information module is used for initializing the basic information content of the topology elements and also is user-defined extensible information, and drawing by adopting the user-defined equipment information, including list presentation and initialization data association;

the second module is a topological graph rendering module which is used for loading and rendering data and separately loading the data and rendering the graph;

the topology dragging control module is used for binding a dragging event with each equipment element, and defining parameters and contents to expand patterns required by the graphics;

the module IV is a topological link control module and is used for increasing the action of moving the mouse to the topological elements and the action of moving the mouse out and linking the two topological elements;

and the fifth module is a topological graph datamation module, and comprises data storage and the step of reacquiring and updating the topological graph link information.

1) And (3) environment configuration: the scheme needs to be built in the following environment, Vue3 whole barrel framework integration Antv is needed, and the method is suitable for being displayed on a PC Web.

2) The page frame is composed of:

the method adopts vue modularization to split the whole page into three components, namely an equipment list module, a topology operation tool module and a topology drawing display module

The three modules are assembled into one page, the layout is adjusted according to the required positions, legend information of a topological graph can be added according to the service requirement, operation instructions can be added in a tool, and expansion such as searching can be added in an equipment list.

3) And (3) topological graph service processing flow:

vue fetch remote device data, splice in array mode, collect historical topology information, integrate current displayed content, initialize event monitoring (including hovernde, addEdge, dragItem, selectNode) of topology graph, render topology graph

Dragging the equipment element, and executing a handleDrage method after dragging is finished, wherein the method is used for monitoring the dragging position and drawing information after dragging is finished.

And d, performing edge adding operation on the plurality of dragging elements through the dragging element virtual control node displayed by the hoverNode in the a, and configuring the attribute of the edge to achieve the content change of the link.

After the operation is completed, all instantiated drag elements drawn in the container need to be subjected to data analysis, edge and nodes assembly object data are obtained through a grahp.save () method, finally, data are reserved in a fetch mode of vue, and a operation is repeated to update

4) The topological graph non-service data processing flow comprises the following steps:

customizing one or more basic elements, namely non-dynamic data, according to the standard of the elements in the Antv G6;

repeating the operations b, c and d in the 3) flow.

The foregoing shows and describes the general principles, essential features, and advantages of the invention. It will be understood by those skilled in the art that the present invention is not limited to the embodiments described above, and that the preferred embodiments of the invention and described in the specification are only preferred embodiments of the invention and are not intended to limit the invention, and that various changes and modifications may be made without departing from the novel spirit and scope of the invention, which fall within the scope of the invention as claimed. The scope of the invention is defined by the appended claims and equivalents thereof.

Claims (6)

1. An implementation method of a custom visualization topological graph based on Antv is characterized by comprising the following 5 modules: the system comprises a topological equipment basic information module, a topological graph rendering module, a topological dragging control module, a topological link control module and a topological graph datamation module;

a first module: the topology equipment basic information module is used for initializing the basic information content of the topology elements and also is user-defined extensible information, and drawing by adopting the user-defined equipment information, including list presentation and initialization data association;

the second module is a topological graph rendering module which is used for loading and rendering data and separately loading the data and rendering the graph;

the topology dragging control module is used for binding a dragging event with each equipment element, and defining parameters and contents to expand patterns required by the graphics;

the module IV is a topological link control module and is used for increasing the action of moving the mouse to the topological elements and the action of moving the mouse out and linking the two topological elements;

and the fifth module is a topological graph datamation module, and comprises data storage and the step of reacquiring and updating the topological graph link information.

2. The method for implementing the Antv-based custom visualization topological graph according to claim 1, wherein: the basic information module of the topology equipment is specifically realized by the following steps:

1) and (3) presenting the list:

a. the method comprises the steps of expandable equipment information management, wherein the module is not contained in a whole topological graph module, but is provided with a single equipment management module, the module expands equipment information, the conventional equipment information comprises an equipment name, an equipment type, an equipment Mac, an equipment coding code and the like, the expandable information comprises the state of the equipment, the alarm level of the equipment, the picture image (a graph shown in a topological graph) of the equipment and the like, and the expandable information is expanded according to actual requirements, and the expandable equipment information can be added, such as whether the equipment can be associated with other equipment or not, whether the equipment can become a complex associated configuration such as subset equipment or not;

b. obtaining data of remote equipment through fetch in vue, wherein the data includes name (element name), size (element picture size), cid (element unique identification), status (element current state), shape (topological graph type), and other element information is basically contained in the configuration in (a), arranging the data into an array, and then drawing a required list through page traversal;

2) initializing data association: the devices presented in the list should be data that does not appear in the topology, so when adding or deleting devices in the topology map, dynamic trigger events are needed to update the associated device data, that is, the triggered data is transferred by using the custom event ($ emit) of the common component communication event bus (eventBus),

the data format is as follows:

[{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]},{}...]。

3. the method for implementing the Antv-based custom visualization topological graph according to claim 1, wherein: the specific implementation method of the topological graph rendering module is as follows:

1) topology container: a container, typically a div tag, needs to be created in HTML to hold the graph drawn by G6; g6 adds canvas label under the container when drawing, and then draws the graph therein;

2) preparing topological graph data: the data source of the G6 is introduced into an object in a JSON format; the object needs to have node (nodes) and edge (edges) fields which are respectively expressed by arrays; the nodes object is contained in the nodes array, the unique id is the necessary attribute in each node object, and x and y are used for positioning; the edges array contains edge objects, and source and target are necessary attributes of each edge and respectively represent a starting point id and a target point id of the edge;

3) instantiation of the topological graph: when a diagram is instantiated, at least a container, a width and a height need to be set for the diagram; instantiating the topology graph by adopting G6. graph;

4) rendering a topological graph: the loading of data and the rendering of the graph are two steps, which can be carried out separately, wherein graph.

4. The method for implementing the Antv-based custom visualization topological graph according to claim 1, wherein: the specific implementation method of the topology drag control module is as follows:

1) when equipment list loading is carried out in the module I, a dragging event is bound to each equipment element, namely a dragging start event @ dragstart and a dragging end event @ dragend respectively;

2) the dragged equipment element can move when the dragstart event starts to trigger, and offset X and offset Y are acquired in real time and used for recording the current position information after the element stops moving; when the dragand is finished, triggering a topology primitive element adding operation executeCommand and data association updating in a linkage module I, updating list information in the module I, namely deleting the equipment which is dragged and removed;

3) in the method for customizing execuutecomm, add the content that add needs to be completed, when the built-in node does not meet the requirement, customize the node by the method of G6.register node (nodeName, options, exendedNode);

4) dynamic expansion graph for drawing topological graph

The primitive pixel types that can be supported according to addShape in Antv G6 include 'rect', 'circle', 'fan', 'ellise', 'marker', 'image', 'marker', 'path', 'text', 'dom (svg');

adding an image through addShape for displaying a topological element picture, namely device picture information displayed in the topological graph; the Attrs parameter is { id, x, y, width, height, img };

adding text for displaying the description information of the topological elements, wherein the Attrs parameters are { id, x, y, textAlign, textBaseline, lineHeight, text, parent, name and file };

adding circle for displaying real-time state information, wherein the Attrs parameter is { id, x, y, r, className, fill };

adding rect for adding virtual nodes and virtual control point positions, wherein the Attrs parameters are { x, y, width, height, fill, stroke, fillovisity, isRect, options, className };

and adding dom for displaying the content of the custom html, wherein the Attrs parameters are { id, x, y, width, height, html }.

5. The method for implementing the Antv-based custom visualization topological graph according to claim 1, wherein: the specific implementation method of the topology link control module is as follows:

1) adding an action of moving a mouse to a topological element and a mouse moving-out action, wherein the mouse is moved to the element, a Graph DOM container is obtained through a grahp.

2) Clicking the topological element by a mouse, associating the exact virtual node added in the module III, presenting through options, controlling the style presentation mask form to comprise four operable control points, namely an upper control point, a lower control point, a left control point, a right control point and a left control point, selecting the control point to drag, changing the size of the topological element, and updating the position and the size of the topological element by using graph.

3) Clicking the selected element by a mouse, triggering a deletion event, namely, a grahp.removeItem, and updating a data association list in the association module I;

4) moving a mouse point to the top of the topological element, clicking the presented virtual control node (the virtual control node is composed of InPoints and outPoints), clicking other topological elements again to generate an edge object, adding a path through addShape to generate a link line, and generating a straight line, a dotted line, a curve, a Bezier curve and the like by using the path of the path through the link line; finally the two topological elements are linked.

6. The method for implementing the Antv-based custom visualization topological graph according to claim 1, wherein: the topological graph datamation module comprises data storage and reacquiring and updating topological graph link information, and the method specifically comprises the following steps:

acquiring edge and node assembly object data by a grahp.save () method, remotely storing the data by a catch mode, acquiring real-time state information of equipment again after the data is stored, comparing the acquired state information with edge set information (acquired by grahp.getedges) acquired by a topological graph, and updating the real-time link line information of the topological graph by a grahp.update.

Images