CN113850884A

CN113850884A - Method and device for generating mulberry basic diagram, electronic equipment and storage medium

Info

Publication number: CN113850884A
Application number: CN202110949473.6A
Authority: CN
Inventors: 杨明哲
Original assignee: Beijing Dajia Internet Information Technology Co Ltd
Current assignee: Beijing Dajia Internet Information Technology Co Ltd
Priority date: 2021-08-18
Filing date: 2021-08-18
Publication date: 2021-12-28

Abstract

The disclosure provides a method and a device for generating a mulberry basic diagram, an electronic device and a storage medium. The method comprises the following steps: according to the method, the hierarchical information of a plurality of nodes is determined according to the side data in the data to be visualized, the node layout information of the nodes on the page is determined according to the node data and the hierarchical information in the data to be visualized, the corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information, finally, the edges between the corresponding nodes are rendered on the page according to the side data and the node layout information, and a visualized morgan graph is generated.

Description

Method and device for generating mulberry basic diagram, electronic equipment and storage medium

Technical Field

The present disclosure relates to the field of computer technologies, and in particular, to a method and an apparatus for generating a morgan map, an electronic device, and a storage medium.

Background

Currently, in visual analysis, a morgan graph can clearly see various data of different nodes for data traffic analysis, and therefore, data analysis and mining are generally performed based on the morgan graph in the related art.

In the related art, in the process of drawing the mor-base diagram according to data, the existing mor-base diagram can only meet simple analysis under a specific data magnitude scene, and under the condition of large data volume, the form is difficult to customize, and the difficulty in interaction analysis and layout expansion are pain points. Therefore, how to generate the morse base map in a big data scene is a problem which needs to be solved urgently.

Disclosure of Invention

According to a first aspect of the embodiments of the present disclosure, there is provided a method for generating a sang-base diagram, including: acquiring data to be visualized in a page, wherein the data to be visualized comprises node data and edge data corresponding to a plurality of nodes respectively; determining hierarchy information of the plurality of nodes according to the edge data; determining node layout information of each of the plurality of nodes on the page according to the node data and the hierarchy information; rendering corresponding nodes onto the page based on the node layout information according to the hierarchy information; and rendering edges between corresponding nodes on the page according to the edge data and the node layout information so as to generate a visual mulberry-based graph.

In an embodiment of the present disclosure, wherein the node data includes a flow value, and the determining node layout information of each of the plurality of nodes on the page according to the node data and the hierarchy information includes: determining a target node corresponding to the maximum flow value from the plurality of nodes according to the flow values corresponding to the plurality of nodes respectively; acquiring the initialized maximum height of a node, and taking the maximum height of the node as the height of the target node on a page; determining a scale according to the height of the target node on the page and the maximum flow value; for one node except the target node in the plurality of nodes, determining the height of the node according to the flow value of the node and the scale; and for each node, determining node layout information of the node according to the level information of the node and the height of the node.

In one embodiment of the present disclosure, the determining node layout information of the node according to the hierarchy information of the node and the height of the node includes: acquiring initialization information preset for the page, wherein the initialization information comprises node width and node distance; determining vertex coordinate information of the nodes according to the level information of the nodes, the width of the nodes, the distance between the nodes and the height of the nodes; and determining the node layout information of the nodes according to the vertex coordinate information of the nodes.

In an embodiment of the present disclosure, the determining a scale according to the height of the target node on the page and the maximum value of the traffic includes: and acquiring the ratio of the height of the target node on the page to the maximum flow, and determining the ratio as the scale.

In one embodiment of the present disclosure, the determining vertex coordinate information of the node according to the level information of the node, the node width, the node interval, and the height of the node includes: determining coordinate information of the top left vertex of the node according to the level information of the node and the node distance; determining coordinate information of the top right vertex of the node according to the level information of the node, the node interval and the node width; determining the coordinate information of the lower left vertex of the node according to the level information of the node, the node distance and the height of the node; and determining the coordinate information of the lower right vertex of the node according to the level information of the node, the width of the node, the distance between the nodes and the height of the node.

In an embodiment of the present disclosure, the rendering edges between corresponding nodes onto the page according to the edge data and the node layout information to generate a visualized morse-based graph includes: aiming at each node, acquiring a father node and a child node of the node according to the edge data of the node; determining a first display position of the father node on the page according to the node layout information of the father node; determining a second display position and height of the child node on the page according to the node layout information of the child node; drawing an edge with the height of the child node as a width between the first display position and the second display position to generate a visual morse diagram.

In an embodiment of the present disclosure, after the rendering edges between corresponding nodes onto the page based on the edge data to generate a visualized mor-base graph, the method further includes: receiving a trigger operation on a target node in the morse base map; responding to the trigger operation, and carrying out upstream searching and downstream searching on the target node to obtain all nodes and edges which have incidence relation with the target node in the morse base graph; and adjusting the display styles of all the found nodes and edges from a first display style to a second display style, wherein at least one display parameter of the first display style and the second display style is different.

In one embodiment of the present disclosure, the method further comprises: receiving a node expansion request for a first node in a last hierarchy of the morse base graph, wherein the node expansion request comprises node data of a second node to be added; determining the hierarchy information of the second node according to the hierarchy information of the first node; rendering the second node, the edge between the first node and the second node onto the page according to the node layout information of the first node, the hierarchy information of the second node, and the node data of the second node.

In one embodiment of the present disclosure, the rendering the second node, the edge between the first node and the second node onto the page according to the node layout information of the first node, the hierarchy information of the second node, and the node data of the second node includes: determining node layout information of the second node on the page according to the hierarchy information of the second node and the node data of the second node; determining the height and a third display position of the second node on the page according to the node layout information of the second node on the page; determining a fourth display position of the first node on the page according to the node layout information of the first node; rendering the second node to the page according to the node layout information of the second node on the page to obtain the second node; and drawing an edge between the first node and the second node between the third display position and the fourth display position by taking the height of the second node on the page as the width.

In an embodiment of the present disclosure, the determining hierarchy information of the plurality of nodes according to the edge data includes: determining incidence relations among the plurality of nodes according to the edge data; and determining the hierarchical information of the nodes according to the incidence relation.

The disclosure provides a generating method of a mor-basemap, in the process of generating the mor-basemap based on data to be visualized, determining the hierarchy information of a plurality of nodes according to the side data in the data to be visualized, determining the node layout information of the nodes on the page according to the node data and the hierarchy information in the data to be visualized, and rendering the corresponding nodes based on the node layout information to a page according to the hierarchy information, and finally rendering the edges between the corresponding nodes to the page according to the edge data and the node layout information to generate a visual mulberry-based graph, thereby, in the process of generating the morqui base graph, determining the hierarchical information of a plurality of nodes based on the side data in the data to be visualized, and rendering the node layout information of the corresponding nodes and the edges among the nodes to a page based on the hierarchy information to generate a visual morgan graph, so that the visual morgan graph is drawn based on the hierarchy information.

According to a second aspect of the embodiments of the present disclosure, there is provided an apparatus for generating a mulberry basic map, including: the data visualization method comprises an acquisition module, a display module and a display module, wherein the acquisition module is configured to acquire data to be visualized in a page, and the data to be visualized comprises node data and edge data corresponding to a plurality of nodes; a first determining module configured to determine hierarchical information of the plurality of nodes according to the edge data; a second determination module configured to determine node layout information of each of the plurality of nodes on the page according to the node data and the hierarchy information; a first rendering module configured to render corresponding nodes onto the page based on the node layout information according to the hierarchy information; a generating module configured to render edges between corresponding nodes onto the page according to the edge data and the node layout information to generate a visualized morse base graph.

In an embodiment of the disclosure, wherein the node data includes a traffic value, the second determining module includes: the first determining unit is configured to determine a target node corresponding to the maximum flow value from the plurality of nodes according to the flow values corresponding to the plurality of nodes respectively; the acquiring unit is configured to acquire the initialized maximum height of the node and take the maximum height of the node as the height of the target node on a page; the second determining unit is configured to determine a scale according to the height of the target node on the page and the maximum flow value; a third determining unit configured to determine, for one of the plurality of nodes other than the target node, a height of the one node according to the flow value of the one node and the scale; a fourth determination unit configured to determine, for each node, node layout information of the node according to the hierarchy information of the node and the height of the node.

In an embodiment of the disclosure, the fourth determining unit is specifically configured to: acquiring initialization information preset for the page, wherein the initialization information comprises node width and node distance; determining vertex coordinate information of the nodes according to the level information of the nodes, the width of the nodes, the distance between the nodes and the height of the nodes; and determining the node layout information of the nodes according to the vertex coordinate information of the nodes.

In an embodiment of the disclosure, the second determining unit is specifically configured to: and acquiring the ratio of the height of the target node on the page to the maximum flow, and determining the ratio as the scale.

In an embodiment of the disclosure, the determining vertex coordinate information of the node according to the level information of the node, the node width, the node distance, and the height of the node, and the second determining module is specifically configured to: determining coordinate information of the top left vertex of the node according to the level information of the node and the node distance; determining coordinate information of the top right vertex of the node according to the level information of the node, the node interval and the node width; determining the coordinate information of the lower left vertex of the node according to the level information of the node, the node distance and the height of the node; and determining the coordinate information of the lower right vertex of the node according to the level information of the node, the width of the node, the distance between the nodes and the height of the node.

In one embodiment of the present disclosure, the apparatus further comprises: the generation module is specifically configured to: aiming at each node, acquiring a father node and a child node of the node according to the edge data of the node; determining a first display position of the father node on the page according to the node layout information of the father node; determining a second display position and height of the child node on the page according to the node layout information of the child node; drawing an edge with the height of the child node as a width between the first display position and the second display position to generate a visual morse diagram.

In one embodiment of the present disclosure, the apparatus further comprises: a first receiving module configured to receive a trigger operation on a target node in the morse base graph; a response module configured to respond to the trigger operation, perform upstream lookup and downstream lookup on the target node to obtain all nodes and edges in the morse base graph having an association relationship with the target node; an adjustment module configured to adjust the display styles of all the found nodes and edges from a first display style to a second display style, wherein at least one display parameter of the first display style and the second display style is different.

In one embodiment of the present disclosure, the apparatus further comprises: a second receiving module configured to receive a node expansion request for a first node in a last hierarchy of the morqui map, wherein the node expansion request includes node data of a second node to be added; a third determining module configured to determine hierarchy information of the second node according to the hierarchy information of the first node; a second rendering module configured to render the second node, an edge between the first node and the second node onto the page according to the node layout information of the first node, the hierarchy information of the second node, and the node data of the second node.

In an embodiment of the disclosure, the second rendering module is specifically configured to: determining node layout information of the second node on the page according to the hierarchy information of the second node and the node data of the second node; determining the height and a third display position of the second node on the page according to the node layout information of the second node on the page; determining a fourth display position of the first node on the page according to the node layout information of the first node; rendering the second node to the page according to the node layout information of the second node on the page to obtain the second node; and drawing an edge between the first node and the second node between the third display position and the fourth display position by taking the height of the second node on the page as the width.

In an embodiment of the disclosure, the first determining module is specifically configured to: determining incidence relations among the plurality of nodes according to the edge data; and determining the hierarchical information of the nodes according to the incidence relation.

The present disclosure provides a generating device of a mor-basemap, in the process of generating the mor-basemap based on data to be visualized, determining the hierarchy information of a plurality of nodes according to the side data in the data to be visualized, determining the node layout information of the nodes on the page according to the node data and the hierarchy information in the data to be visualized, and rendering the corresponding nodes based on the node layout information to a page according to the hierarchy information, and finally rendering the edges between the corresponding nodes to the page according to the edge data and the node layout information to generate a visual mulberry-based graph, thereby, in the process of generating the morqui base graph, determining the hierarchical information of a plurality of nodes based on the side data in the data to be visualized, and rendering the node layout information of the corresponding nodes and the edges among the nodes to a page based on the hierarchy information to generate a visual morgan graph, so that the visual morgan graph is drawn based on the hierarchy information.

A third aspect of the embodiments of the present disclosure provides an electronic device, including: a processor; a memory for storing the processor-executable instructions; wherein the processor is configured to execute the instructions to implement a generation method of the sang-based diagram in the embodiments of the present disclosure.

A fourth aspect of the embodiments of the present disclosure proposes a storage medium, in which instructions, when executed by a processor of an electronic device, enable the electronic device to perform a method of generating a mor base map in the embodiments of the present disclosure.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the disclosure and are not to be construed as limiting the disclosure.

FIG. 1 is a flow chart illustrating a method of generating a mulberry base map in accordance with an exemplary embodiment.

Fig. 2 is a flowchart illustrating a method of generating a morgan map according to another exemplary embodiment.

Fig. 3 is a flowchart illustrating a method of generating a morgan map according to another exemplary embodiment.

FIG. 4 is a block diagram illustrating an apparatus for generating a mulberry base map according to an example embodiment.

Fig. 5 is a block diagram illustrating another apparatus for generating a morgan diagram according to an example embodiment.

Fig. 6 is a block diagram of an electronic device illustrating an apparatus for generating a morgan diagram according to an example embodiment.

Detailed Description

Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.

In order to make the technical solutions of the present disclosure better understood by those of ordinary skill in the art, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.

A method, an apparatus, an electronic device, and a storage medium for generating a morgan diagram according to embodiments of the present disclosure are described below with reference to the accompanying drawings.

Fig. 1 is a flowchart illustrating a generating method of a morgan diagram according to an exemplary embodiment, and as shown in fig. 1, the generating method of the morgan diagram may include:

in step S11, data to be visualized in the page is obtained, where the data to be visualized includes node data and edge data corresponding to each of the plurality of nodes.

It should be noted that, the generating method of the morgan diagram in this embodiment is a generating device that executes a morgan diagram, the generating device of the morgan diagram may be implemented in a software and/or hardware manner, the generating device of the morgan diagram in this embodiment may be configured in an electronic device, the electronic device in this embodiment may include a server, and the electronic device in this embodiment is not particularly limited.

In step S12, hierarchy information of the plurality of nodes is determined from the edge data.

In some embodiments, one implementation of determining hierarchical information for a plurality of nodes based on the edge data is: and determining the incidence relation among the nodes according to the edge data, thereby determining the hierarchy information of the nodes according to the incidence relation.

In some embodiments, the edge data is used to represent a connection relationship between nodes, and specifically, a hierarchical relationship of the plurality of nodes may be determined according to the connection relationship between the nodes.

As an exemplary implementation, the connection relationship between nodes can be represented by the data structure of the edge, that is, in some embodiments, the hierarchical information of a plurality of nodes can be determined according to the data structure of the edge.

As an example, the data structure of the edge may include a start node and an end node of the edge.

For example, the data structure that may be imported by edges from a node is:

based on the data structure of the edge, it can be determined that the hierarchy information of the three nodes a, b, and c is: a is the root node and b c is the level two node.

As another example, the data structure that may be imported by edges from a node is:

based on the data structure of the edge, it can be determined that the hierarchy information of the three nodes a, b, and c is: a is a root node, b is a secondary node, and c is a tertiary node.

In step S13, node layout information of each of the plurality of nodes on the page is determined based on the node data and the hierarchy information.

In step S14, the corresponding node is rendered onto the page based on the node layout information according to the hierarchy information.

Specifically, the nodes can be rendered on the page layer by layer based on the node layout information of the corresponding nodes according to the hierarchy information of each node, so that the nodes are rendered on the page layer by layer.

In some embodiments, according to the above hierarchical information and node layout information, rendering the corresponding node on the page by means of native drawing (Scalable Vector Graphics, SVG), where the native drawing method is as follows:

SVG is scalable vector graphics, which is a markup language based on XML for describing two-dimensional vector graphics.

And (3) drawing nodes:

and traversing the node layout information to obtain coordinates and width and height, firstly drawing an outer layer rectangle through a rect element, simultaneously, internally setting a forignObject label, and supporting node style self-definition through an HTML template.

The technology of the browser svg can directly draw: < rect > tag, drawing the outer rectangle by the rect element.

Wherein, the forignobject tag and the rect tag are both tags provided by svg, and can be nested with each other for use, for example:

in some embodiments, the area in the foreignObject can write html tags and css styles, and based on the styles from the definition nodes, if only < rect > is used, only simple shapes and interactions can be performed, and complicated self-definition cannot be realized, such as video playing by nodes, animation effect writing inside by nodes, and the like.

Drawing the edges:

after the node is drawn, the data values of the upstream and downstream nodes are used for starting drawing the edge with the data distribution proportion, the coordinate calculation is carried out only by calculating the conversion proportion, the Bezier curve is drawn for three times, and the calculation mode of the conversion proportion is as follows:

conversion ratio is the value of downstream node/upstream node

Among them, the bezier curve is based on a rule, and a regular curve is drawn, and is widely used in curve design.

After the upper node is drawn, the coordinate information of four points of the current node and the hierarchy information of the current node are stored and are stored in the object of the node, so that the id of the upstream node and the id of the downstream node can be directly found only through the data structure of the edge, and the value of the corresponding node is accessed through the id to obtain the data values of the upstream node and the downstream node.

For drawing the cubic bezier curve, the proportional flow direction of the flow in the layout of the nodes needs to be clearly known, so the conversion ratio needs to be calculated, taking the data structure of the nodes as an example,

that is, it means that 50% of the traffic in node 1 flows to node 2, if the node height conversion is used to correspond to the traffic proportion, the height of node 1 is maxhight, the height of node 2 is maxhight/2, and finally the layout (coordinate update) of all nodes is recalculated, so that the proportion trend of the traffic can be clearly understood from the layout of the nodes.

Tooltip mapping:

and binding events on the nodes and the edges, recording the current coordinate as an origin point at the upper left corner when a mouse enters, and customizing a Tooltip style of the prompt bar through HTML.

In some embodiments, Tooltip refers to a small white box that pops up when a computer mouse is stroked into some pie charts.

The current coordinate is the current position of the mouse, the premise is that the mouse is already scribed into the node, the scribed node is not recorded, the tooltip is only displayed when the hover node is scribed, and after the mouse is moved into the node, the coordinate of the mouse is used as the coordinate of the upper left corner of the tooltip, and the tooltip is not provided with the node/edge or the tooltip.

In some embodiments, the area of the node/edge is limited, and often, the information of the node and the edge has a large amount of service information to be displayed, and at this time, the area of the node/edge is not left, and another area is needed to be displayed, so that Tooltip is needed to be drawn.

In step S15, edges between corresponding nodes are rendered onto the page according to the edge data and the node layout information to generate a visualized morse base graph.

In some embodiments, one possible implementation of rendering edges between corresponding nodes onto a page according to the edge data and the node layout information to generate a visualized morse base graph is as follows: and aiming at each node, acquiring a father node and a child node of the node according to the edge data of the node, determining a first display position of the father node on a page and a second display position and height of the child node on the page according to the node layout information, and drawing an edge with the height of the child node as the width between the first display position and the second display position.

Based on the above embodiment, in the process of triggering the nodes in the mor-based graph, only the node, the parent node and the child node of the node are highlighted in the mor-based graph in the related art, however, in a big data scene, when there are many nodes, only three nodes are highlighted, and all related nodes in the upstream and the downstream cannot be found at a glance, so that the efficiency of data analysis is very low. In order to help an analyst to directly analyze all the relational nodes and flow distribution of the upstream and downstream of the correlation, the analysis efficiency is improved. After rendering edges between corresponding nodes onto a page based on the edge data to generate a visual morse base graph, the method further includes: receiving a trigger operation on a target node in the mor-based graph, responding to the trigger operation, searching upstream and downstream for the target node to obtain all nodes and edges in the mor-based graph, which have an association relation with the target node, and adjusting the display styles of all the found nodes and edges from a first display style to a second display style. Therefore, when the triggering operation of the target node of the morse base graph is received, the upstream and downstream searching is carried out on the target node to obtain the nodes and edges with the association relation of the target node, and the display styles of all the nodes and edges are adjusted from the first display style to the second display style, so that the highlight display function of the built-in full link is realized.

Specifically, the generated morgan map has the following highlighting functions: when one node is clicked, two recursion methods are simultaneously carried out, upstream searching and downstream searching are carried out, identifications of all related nodes and edges are found and stored, the nodes and the edges are found according to the identifications, the styles are modified, the nodes and the edges are dynamically highlighted, and finally all the other nodes and the edges are weakened, so that the effect of simulating highlighting is achieved.

As an exemplary embodiment, the method of generating a morgan map further includes: rendering the corresponding node to the page based on the node layout information according to the hierarchy information may be: receiving a node expansion request for a first node in the last hierarchy of the morqui map, wherein the node expansion request comprises node data of a second node to be added, determining the hierarchy information of the second node according to the hierarchy information of the first node, and rendering the second node, and edges between the first node and the second node onto a page according to the hierarchy information of the second node and the node data.

In some embodiments, the second node, the edge between the first node and the second node is rendered onto the page according to the hierarchy information and the node data of the second node, and the method includes: according to the level information and the node data of the second node, determining node layout information of the second node on the page, rendering the second node on the page according to the node layout information of the second node on the page to obtain the second node, determining the height of the second node on the page according to the node layout information of the second node on the page, and drawing an edge between the first node and the second node according to the height of the second node on the page.

Specifically, the embodiment further provides an extension support function, for example: when more nodes and edges need to be expanded at the horizontal hierarchy/the vertical hierarchy, only the corresponding data source needs to be changed, and the interaction events can be recalculated, drawn and bound through the change of the data.

The method for changing the data source may be as follows: first incoming node/edge data structures, such as:

and (3) node:

side:

only the two data sources can determine to calculate the corresponding layout and diagram, and meanwhile, the data source is changed in the code, or the back end directly returns the changed data source to be directly transmitted to the database for use, so that the change can be generated.

In this embodiment, the binding interaction event may be bound by JS, for example:

time to delete original element first, api: removeEventListener, in rebinding a new event to all elements, api: addEventListener.

Because the data source change (graph structure change) nodes may be increased, disappeared, shifted, at this time, the graph is re-rendered and the click event above is re-bound, the tooltip mouse moves into the event, and the like, so as to realize binding of the interaction event.

Fig. 2 is a flowchart illustrating a method for generating a morgan diagram according to another exemplary embodiment, and as shown in fig. 2, the method for generating the morgan diagram may include:

in step S21, data to be visualized in the page is obtained, where the data to be visualized includes node data and edge data corresponding to each of the plurality of nodes.

In step S22, hierarchy information of the plurality of nodes is determined from the edge data.

In step S23, a target node corresponding to the maximum flow rate value is determined from the plurality of nodes based on the flow rate values corresponding to the plurality of nodes.

In some embodiments, the node data includes a current traffic size of the node, a traffic distribution trend of the node, and the like.

In step S24, the initialized node maximum height is acquired, and the node maximum height is taken as the height of the target node on the page.

In some embodiments, in a big data scenario, a scenario where data is excessively spaced occurs, and if the maximum node height is set to be excessively high, neither the node nor the edge can interact with each other, so the maximum height of the node is preset to serve as the height of the target node on the page, and the maximum height of the preset node may be, but is not limited to, the initialized maximum node height.

In step S25, a scale is determined according to the height of the target node on the page and the maximum flow.

In some embodiments, according to the height of the target node on the page and the maximum value of the flow, one implementation of determining the scale is to obtain a ratio of the height of the target node on the page to the maximum value of the flow, and determine the ratio as the scale.

In some embodiments, to accurately calculate the scale size, the following is done: because the node needs to directly display the flow at the current stage, the height of the node generally represents the proportion of the ratio, the height of the node needs to be calculated dynamically, if the maximum height MaxHeight of the node is transmitted during initialization, the maximum value node MaxValue needs to be calculated in a traversal mode in the data initialization stage, then the height conversion of other nodes is carried out by calculating a scale, and the calculation of the scale is disclosed as follows:

scale (scale) node maximum height (MaxHeight)/maximum node (MaxValue)

The node height means the flow distribution ratio, for example: the morbigram is a traffic representing data, for example, the initial node of the current traffic is 100, and then the current traffic must flow to each node of the second layer, and the sum of the nodes is also 100.

The sangji diagram refers to a specific type of flow chart in visualization, and the branch width corresponds to the data traffic size, and is generally used in visualization analysis of various industries.

The height conversion of other nodes by the scale can be implemented as follows:

data structure of initially incoming node

MaxValue is 2 obtained by traversal, if MaxHeight is 100, then the height of node-1 is 100, and the scale bar is:

scale＝100/2＝50

the height of node-2 is:

node-2.value*scale＝>1*50＝50

however, the scale is insufficient, and in fact, in a large data scene, a scene of "too large interval" may occur in data, for example, a data pool may be in billions of units, and may also have a single-digit unit, so that after conversion by the scale, the node height in the single-digit unit is far less than 1px, which cannot be realized in a browser environment, and if the maximum node height is set too high, neither the node nor the edge can interact, so a minimum height threshold value is set, and thus, in a manner of losing precision, friendly analysis and interaction on visualization can be achieved.

In step S26, for one of the plurality of nodes other than the target node, a height of the one node is determined based on the flow value and the scale of the one node.

Specifically, the height of a node is determined according to the scale and the flow value of a node except the target node.

In step S27, for each node, node layout information of the node is determined from the level information of the node and the height of the node.

In some embodiments of the present disclosure, to accurately determine node layout information of a node, the node layout information of the node is determined according to level information of the node and a height of the node, the method includes: acquiring initialization information preset for a page, wherein the initialization information comprises node width and node distance, and determining vertex coordinate information of nodes according to the level information, the node width, the node distance and the height of the nodes.

In some embodiments, one way of determining the vertex coordinate information of the node based on the level information of the node, the node width, the node interval, and the height of the node is to determine the upper left vertex coordinate information of the node based on the level information of the node, the node interval, and the node width, determine the upper right vertex coordinate information of the node based on the level information of the node, the node interval, and the node width, determine the lower left vertex coordinate information of the node based on the level information of the node, the node interval, and the height of the node, and determine the lower right vertex coordinate information of the node based on the level information of the node, the node width, the node interval, and the height of the node.

In other embodiments, to accurately determine vertex coordinate information of nodes, coordinate position calculation may be performed according to configurations such as width of nodes transmitted during initialization, vertical distance between nodes, left-right distance between nodes, and the like, coordinates of each node are sequentially calculated according to the distance and the width from the top left corner of a canvas at an initial position, a current hierarchy is recorded, and finally two-dimensional coordinates of all nodes are stored in a node object. Specifically, in order to accurately calculate the coordinates of each node in turn according to the pitch and the width, as an exemplary embodiment, the following steps are performed: the method comprises the steps of initially setting some configurations, having node width w and node spacing p, setting a default height h of a node inside, starting from an origin at the upper left corner (0, 0), calculating the hierarchy of the current node (the nth row and the nth column) according to an incoming data structure, and sequentially analogizing the coordinates of the upper left corner of the current node, namely (np, np), the upper right corner (np + nw, np), the lower left corner (np, np + nh), the lower right corner (np + nw, np + nh).

If the height of the configured node needs to be changed according to the traffic proportion, the height of each node of each level is calculated by traversing the data structure, and the upper h is replaced when the coordinate of each node is calculated.

In step S28, the corresponding node is rendered onto the page based on the node layout information according to the hierarchy information.

In step S29, edges between corresponding nodes are rendered onto the page according to the edge data and the node layout information to generate a visualized morse base graph.

Fig. 3 is a flowchart illustrating a method of generating a morgan map according to another exemplary embodiment, and as shown in fig. 3, the method of generating the morgan map may include:

step S31, acquiring data to be visualized in the page, where the data to be visualized includes node data and edge data corresponding to each of the multiple nodes.

In step S32, hierarchical information of the plurality of nodes is determined based on the edge data.

Step S33, determining node layout information of each of the plurality of nodes on the page according to the node data and the hierarchy information.

And step S34, rendering the corresponding node to the page based on the node layout information according to the hierarchy information.

It should be noted that, for specific implementation manners of step S31 to step S34, reference may be made to the relevant description in the foregoing embodiments.

Step S35, for each node, the parent node and child node of the node are acquired according to the edge data of the node.

In step S36, a first display position of the parent node on the page is determined according to the node layout information of the parent node.

And step S37, determining a second display position and height of the child node on the page according to the node layout information of the child node.

In step S38, an edge with the height of the child node as the width is drawn between the first display position and the second display position to generate a visual morse diagram.

The disclosure provides a generating method of a mulberry-based graph, in the process of generating the mulberry-based graph based on data to be visualized, according to side data in the data to be visualized, hierarchy information of a plurality of nodes is determined, according to the node data and the hierarchy information in the data to be visualized, node layout information of the nodes on a page is determined, according to the hierarchy information, corresponding nodes based on the node layout information are rendered on the page, finally, for each node, a father node and a son node of the node are obtained, and according to the layout information of the father node and the son node, display positions and heights on the pages of the father node and the son node are determined, so as to generate the visualized mulberry-based graph, therefore, in the process of generating the mulberry-based graph, based on the side data in the data to be visualized, the hierarchy information of the nodes is determined, and based on the hierarchy information, the node layout information of the corresponding nodes and edges between the nodes are rendered on the page, the visual mulberry base graph is generated, and the visual mulberry base graph is drawn based on the side data and the node layout information.

FIG. 4 is a block diagram illustrating an apparatus 140 for generating a mulberry base map according to an example embodiment. Referring to fig. 4, the apparatus includes an acquisition module 141, a first determination module 142, a second determination module 143, a first rendering module 144, and a generation module 145.

The obtaining module 141 is configured to obtain data to be visualized in the page, where the visualized data includes node data and edge data corresponding to each of the plurality of nodes.

A first determining module 142 configured to determine hierarchical information of the plurality of nodes according to the edge data.

A second determining module 143 configured to determine node layout information of each of the plurality of nodes on the page according to the node data and the hierarchy information.

A first rendering module 144 configured to render the corresponding node onto the page based on the node layout information according to the hierarchy information.

A generating module 145 configured to render edges between corresponding nodes onto a page according to the edge data and the node layout information to generate a visualized morse base graph.

In one embodiment of the present disclosure, as shown in fig. 5, the second determining module 143 includes:

the first determining unit 1431 is configured to determine, according to the flow value corresponding to each of the plurality of nodes, a target node corresponding to the maximum flow value from the plurality of nodes.

An obtaining unit 1432 configured to obtain the initialized node maximum height, and use the node maximum height as a height of the target node on the page.

A second determining unit 1433 configured to determine the scale according to the height of the target node on the page and the maximum value of the flow.

A third determining unit 1434 configured to determine, for one node other than the target node among the plurality of nodes, a height of the one node according to a flow value and a scale of the one node.

A fourth determining unit 1435 configured to determine, for each node, node layout information of the node according to the hierarchy information of the node and the height of the node.

In an embodiment of the present disclosure, as shown in fig. 5, the fourth determining unit 1435 is specifically configured to:

acquiring initialization information preset for a page, wherein the initialization information comprises node width and node distance.

And determining the vertex coordinate information of the nodes according to the level information, the width, the distance and the height of the nodes.

And determining node layout information of the nodes according to the vertex coordinate information of the nodes.

In an embodiment of the present disclosure, as shown in fig. 5, the second determining unit 1433 is specifically configured to:

and acquiring the ratio of the height of the target node on the page to the maximum flow, and determining the ratio as a scale.

In an embodiment of the disclosure, as shown in fig. 5, the vertex coordinate information of the node is determined according to the level information of the node, the width of the node, the distance between the nodes, and the height of the node, and the second determining module 143 is specifically configured to:

and determining the coordinate information of the top left vertex of the node according to the level information and the node distance of the node.

And determining the coordinate information of the top right vertex of the node according to the level information, the node spacing and the node width of the node.

And determining the coordinate information of the lower left vertex of the node according to the level information of the node, the node distance and the height of the node.

And determining the coordinate information of the lower right vertex of the node according to the level information, the width, the distance and the height of the node.

In an embodiment of the disclosure, as shown in fig. 5, the generating module 145 is specifically configured to:

and aiming at each node, acquiring a father node and a child node of the node according to the edge data of the node.

And determining a first display position of the father node on the page according to the node layout information of the father node.

And determining a second display position and height of the child node on the page according to the node layout information of the child node.

And drawing edges with the height of the child nodes as the width between the first display position and the second display position to generate a visual morse diagram.

In one embodiment of the present disclosure, as shown in fig. 5, the apparatus further includes:

a first receiving module 146 configured to receive a trigger operation on a target node in the morse base graph.

And the response module 147 is configured to perform upstream lookup and downstream lookup on the target node in response to the trigger operation to obtain all nodes and edges having an association relationship with the target node in the mor-based graph.

An adjusting module 148 configured to adjust the display styles of all the found nodes and edges from a first display style to a second display style, wherein at least one display parameter of the first display style and the second display style is different.

a second receiving module 149 configured to receive a node expansion request for a first node in a last hierarchy of the morse base graph, wherein the node expansion request includes node data of a second node to be added.

A third determining module 1410 configured to determine the hierarchy information of the second node according to the hierarchy information of the first node.

A second rendering module 1411 configured to render the second node according to the node layout information of the first node. And the hierarchy information and the node data of the second node render the second node, the first node and the edge between the second node onto the page.

In an embodiment of the disclosure, as shown in fig. 5, the second rendering module 1411 is specifically configured to:

and determining the node layout information of the second node on the page according to the hierarchy information of the second node and the node data of the second node.

And determining the height of the second node on the page and a third display position according to the node layout information of the second node on the page.

And determining a fourth display position of the first node on the page according to the node layout information of the first node.

And rendering the second node to the page according to the node layout information of the second node on the page to obtain the second node.

And drawing an edge between the first node and the second node between the third display position and the fourth display position by taking the height on the page of the second node as the width.

In an embodiment of the disclosure, as shown in fig. 5, the first determining module 142 is specifically configured to:

and determining the incidence relation among the nodes according to the edge data.

And determining the hierarchical information of the nodes according to the association relationship.

With regard to the apparatus in the above-described embodiment, the specific manner in which each module performs the operation has been described in detail in the embodiment related to the method, and will not be elaborated here.

In order to implement the above embodiments, the embodiment of the present disclosure further provides an electronic device. Wherein, electronic equipment includes: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to execute the instructions to implement the method of generating the morgan map as before.

As an example, fig. 6 is a block diagram of an electronic device 160 for generating a sang base map according to an exemplary embodiment, where as shown in fig. 6, the electronic device 160 may further include:

a memory 161 and a processor 162, and a bus 163 connecting different components (including the memory 161 and the processor 162), wherein the memory 161 stores a computer program, and the processor 162 executes the program to implement the generation method of the mor base map according to the embodiment of the present disclosure.

Bus 163 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and a processor or local bus using any of a variety of bus architectures. By way of example, such architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, micro-channel architecture (MAC) bus, enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.

Electronic device 160 typically includes a variety of electronic device readable media. Such media may be any available media that is accessible by electronic device 160 and includes both volatile and nonvolatile media, removable and non-removable media.

Memory 161 may also include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM)164 and/or cache memory 165. The electronic device 160 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, the storage system 166 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 6, commonly referred to as a "hard drive"). Although not shown in FIG. 6, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 163 by one or more data media interfaces. Memory 161 may include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the disclosure.

A program/utility 168 having a set (at least one) of program modules 167 may be stored, for example, in memory 161, such program modules 167 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 167 generally perform the functions and/or methodologies of embodiments described in this disclosure.

The electronic device 160 may also communicate with one or more external devices 169 (e.g., keyboard, pointing device, display 1691, etc.), with one or more devices that enable a user to interact with the electronic device 160, and/or with any devices (e.g., network card, modem, etc.) that enable the electronic device 160 to communicate with one or more other computing devices. Such communication may occur via input/output (I/O) interface 1692. Also, electronic device 160 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN) and/or a public network, such as the Internet) via network adapter 1693. As shown, the network adapter 1693 communicates with the other modules of the electronic device 160 via the bus 163. It should be appreciated that although not shown in the figures, other hardware and/or software modules may be used in conjunction with electronic device 160, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.

The processor 160 executes various functional applications and data processing by executing programs stored in the memory 161.

In one embodiment, the processor 162 may be configured to perform the method for generating the sang-based map of the first aspect embodiment of the present disclosure.

In another embodiment, the processor 162 may be configured to perform a method for generating a sang base map of the second aspect embodiment of the present disclosure.

It should be noted that the explanation of the foregoing embodiments of the method for generating a morgan map is also applicable to the apparatus for generating a morgan map in the present embodiment, and the present embodiment is not particularly limited thereto.

In an exemplary embodiment, a storage medium comprising instructions, such as a memory comprising instructions, executable by processor 162 of apparatus 160 to perform the above-described method is also provided. Alternatively, the storage medium may be a non-transitory computer readable storage medium, for example, the non-transitory computer readable storage medium may be a ROM, a Random Access Memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, and the like.

In an exemplary embodiment, a computer program product is also provided, which, when executed by a processor of an electronic device, enables the electronic device to perform the method for generating the mutual graph of the first aspect or the apparatus for generating the mutual graph of the second aspect.

In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the present disclosure. In this specification, the schematic representations of the terms used above are not necessarily intended to refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples. Furthermore, various embodiments or examples and features of different embodiments or examples described in this specification can be combined and combined by one skilled in the art without contradiction.

Furthermore, the terms "first", "second" and "first" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include at least one such feature. In the description of the present disclosure, "a plurality" means at least two, e.g., two, three, etc., unless explicitly specifically limited otherwise.

Any process or method descriptions in flow charts or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing steps of a custom logic function or process, and alternate implementations are included within the scope of the preferred embodiment of the present disclosure in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the embodiments of the present disclosure.

The logic and/or steps represented in the flowcharts or otherwise described herein, e.g., an ordered listing of executable instructions that can be considered to implement logical functions, can be embodied in any computer-readable medium for use by or in connection with an instruction execution system, apparatus, or device, such as a computer-based system, processor-containing system, or other system that can fetch the instructions from the instruction execution system, apparatus, or device and execute the instructions. For the purposes of this description, a "computer-readable medium" can be any means that can contain, store, communicate, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device. More specific examples (a non-exhaustive list) of the computer-readable medium would include the following: an electrical connection (electronic device) having one or more wires, a portable computer diskette (magnetic device), a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber device, and a portable compact disc read-only memory (CDROM). Additionally, the computer-readable medium could even be paper or another suitable medium upon which the program is printed, as the program can be electronically captured, via for instance optical scanning of the paper or other medium, then compiled, interpreted or otherwise processed in a suitable manner if necessary, and then stored in a computer memory.

It should be understood that portions of the present disclosure may be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, the various steps or methods may be implemented in software or firmware stored in memory and executed by a suitable instruction execution system. If implemented in hardware, as in another embodiment, any one or combination of the following techniques, which are known in the art, may be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application specific integrated circuit having an appropriate combinational logic gate circuit, a Programmable Gate Array (PGA), a Field Programmable Gate Array (FPGA), or the like.

It will be understood by those skilled in the art that all or part of the steps carried by the method for implementing the above embodiments may be implemented by hardware that is related to instructions of a program, and the program may be stored in a computer-readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

In addition, functional units in the embodiments of the present disclosure may be integrated into one processing module, or each unit may exist alone physically, or two or more units are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The integrated module, if implemented in the form of a software functional module and sold or used as a separate product, may also be stored in a computer readable storage medium.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.

It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A generation method of a mulberry base map is characterized by comprising the following steps:

acquiring data to be visualized in a page, wherein the data to be visualized comprises node data and edge data corresponding to a plurality of nodes respectively;

determining hierarchy information of the plurality of nodes according to the edge data;

determining node layout information of each of the plurality of nodes on the page according to the node data and the hierarchy information;

rendering corresponding nodes onto the page based on the node layout information according to the hierarchy information;

and rendering edges between corresponding nodes on the page according to the edge data and the node layout information so as to generate a visual mulberry-based graph.

2. The method of claim 1, wherein the node data includes a flow value, and wherein determining node layout information for each of the plurality of nodes on the page based on the node data and the hierarchy information comprises:

determining a target node corresponding to the maximum flow value from the plurality of nodes according to the flow values corresponding to the plurality of nodes respectively;

acquiring the initialized maximum height of a node, and taking the maximum height of the node as the height of the target node on a page;

determining a scale according to the height of the target node on the page and the maximum flow value;

for one node except the target node in the plurality of nodes, determining the height of the node according to the flow value of the node and the scale;

and for each node, determining node layout information of the node according to the level information of the node and the height of the node.

3. The method of claim 2, wherein determining the node layout information of the node according to the hierarchy information of the node and the height of the node comprises:

acquiring initialization information preset for the page, wherein the initialization information comprises node width and node distance;

determining vertex coordinate information of the nodes according to the level information of the nodes, the width of the nodes, the distance between the nodes and the height of the nodes;

and determining the node layout information of the nodes according to the vertex coordinate information of the nodes.

4. The method of claim 1, wherein the rendering edges between corresponding nodes onto the page according to the edge data and the node layout information to generate a visualized morse-based graph comprises:

aiming at each node, acquiring a father node and a child node of the node according to the edge data of the node;

determining a first display position of the father node on the page according to the node layout information of the father node;

determining a second display position and height of the child node on the page according to the node layout information of the child node;

drawing an edge with the height of the child node as a width between the first display position and the second display position to generate a visual morse diagram.

5. The method of claim 1, further comprising:

receiving a trigger operation on a target node in the morse base map;

responding to the trigger operation, and carrying out upstream searching and downstream searching on the target node to obtain all nodes and edges which have incidence relation with the target node in the morse base graph;

and adjusting the display styles of all the found nodes and edges from a first display style to a second display style, wherein at least one display parameter of the first display style and the second display style is different.

6. The method of claim 1, further comprising:

receiving a node expansion request for a first node in a last hierarchy of the morse base graph, wherein the node expansion request comprises node data of a second node to be added;

determining the hierarchy information of the second node according to the hierarchy information of the first node;

rendering the second node, the edge between the first node and the second node onto the page according to the node layout information of the first node, the hierarchy information of the second node, and the node data of the second node.

7. The method of claim 1, wherein determining the hierarchy information of the plurality of nodes according to the edge data comprises:

determining incidence relations among the plurality of nodes according to the edge data;

and determining the hierarchical information of the nodes according to the incidence relation.

8. An apparatus for generating a mulberry base map, comprising:

the data visualization method comprises an acquisition module, a display module and a display module, wherein the acquisition module is configured to acquire data to be visualized in a page, and the visualized data comprises node data and edge data corresponding to a plurality of nodes;

a first determining module configured to determine hierarchical information of the plurality of nodes according to the edge data;

a second determination module configured to determine node layout information of each of the plurality of nodes on the page according to the node data and the hierarchy information;

a first rendering module configured to render corresponding nodes onto the page based on the node layout information according to the hierarchy information;

a generating module configured to render edges between corresponding nodes onto the page according to the edge data and the node layout information to generate a visualized morse base graph.

9. An electronic device, comprising:

a processor;

a memory for storing the processor-executable instructions;

wherein the processor is configured to execute the instructions to implement the generation method of the sang-base diagram of any one of claims 1 to 7.

10. A storage medium, wherein instructions in the storage medium, when executed by a processor of an electronic device, enable the electronic device to perform a method of generating a mor base map according to any one of claims 1 to 7.