Method, device, electronic device and storage medium for generating Sankey diagram

Abstract

The present disclosure proposes a method, device, electronic device and storage medium for generating a Sankey diagram. The method includes: determining the hierarchical information of multiple nodes according to the edge data in the data to be visualized, and determining the node layout information of each of the multiple nodes on the page according to the node data and the hierarchical information in the data to be visualized, and rendering the corresponding nodes based on the node layout information on the page according to the hierarchical information, and finally rendering the edges between the corresponding nodes on the page according to the edge data and the node layout information to generate a visualized Sankey diagram. Thus, in the process of generating the Sankey diagram, the hierarchical information of multiple nodes is determined based on the edge data in the data to be visualized, and the node layout information of the corresponding nodes and the edges between the nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, thereby realizing the drawing of a visualized Sankey diagram based on the hierarchical information.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a method, device, electronic device and storage medium for generating a Sankey diagram. Background Art

[0002] Currently, in visual analysis, the Sankey diagram can clearly show the data of different nodes for data flow analysis. Therefore, related technologies usually perform data analysis and mining based on the Sankey diagram.

[0003] In the related technology, when drawing Sankey diagrams based on data, the existing Sankey diagrams can only meet the simple analysis in a specific data volume scenario. When the data volume is large, its form is difficult to customize, interaction is difficult to analyze, and layout is difficult to expand. Therefore, how to generate Sankey diagrams in big data scenarios is an urgent problem to be solved. Summary of the invention

[0004] The present disclosure relates to the field of computer technology, and in particular to a method, device, electronic device and storage medium for generating a Sankey diagram.

[0005] According to a first aspect of an embodiment of the present disclosure, a method for generating a Sankey diagram is provided, comprising: acquiring data to be visualized in a page, wherein the data to be visualized includes node data and edge data corresponding to each of a plurality of nodes; determining hierarchical 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 hierarchical information; rendering corresponding nodes onto the page based on the node layout information according to the hierarchical information; rendering edges between corresponding nodes onto the page according to the edge data and the node layout information, so as to generate a visualized Sankey diagram.

[0006] In one embodiment of the present disclosure, wherein the node data includes a flow value, determining the node layout information of each of the multiple nodes on the page based on the node data and the hierarchical information includes: determining a target node corresponding to a maximum flow value from the multiple nodes based on the flow values ​​corresponding to each of the multiple nodes; obtaining an initialized maximum height of the node, and using the maximum height of the node as the height of the target node on the page; determining a scale based on the height of the target node on the page and the maximum flow value; for a node other than the target node among the multiple nodes, determining the height of the node based on the flow value of the node and the scale; and for each node, determining the node layout information of the node based on the hierarchical information of the node and the height of the node.

[0007] In one embodiment of the present disclosure, determining the node layout information of the node based on the hierarchical information of the node and the height of the node includes: obtaining initialization information preset for the page, wherein the initialization information includes node width and node spacing; determining the vertex coordinate information of the node based on the hierarchical information of the node, the node width, the node spacing and the height of the node; determining the node layout information of the node based on the vertex coordinate information of the node.

[0008] In one embodiment of the present disclosure, determining the scale based on the height of the target node on the page and the maximum flow rate includes: obtaining the ratio of the height of the target node on the page to the maximum flow rate, and determining the ratio as the scale.

[0009] In one embodiment of the present disclosure, the vertex coordinate information of the node is determined according to the node's level information, the node width, the node spacing, and the node's height, including: determining the upper left vertex coordinate information of the node according to the node's level information and the node spacing; determining the upper right vertex coordinate information of the node according to the node's level information, the node spacing, and the node width; determining the lower left vertex coordinate information of the node according to the node's level information, the node spacing, and the node's height; determining the lower right vertex coordinate information of the node according to the node's level information, the node width, the node spacing, and the node's height.

[0010] In one embodiment of the present disclosure, the edges between corresponding nodes are rendered onto the page according to the edge data and the node layout information to generate a visual Sankey diagram, including: for each node, obtaining the parent node and the child node of the node according to the edge data of the node; determining the first display position of the parent node on the page according to the node layout information of the parent node; determining the second display position and height of the child node on the page according to the node layout information of the child node; and drawing an edge with the height of the child node as the width between the first display position and the second display position to generate a visual Sankey diagram.

[0011] In one embodiment of the present disclosure, after rendering the edges between corresponding nodes on the page based on the edge data to generate a visual Sankey diagram, the method further includes: receiving a trigger operation on a target node in the Sankey diagram; in response to the trigger operation, performing upstream and downstream searches on the target node to obtain all nodes and edges in the Sankey diagram that have an association relationship with the target node; and adjusting the display style of all 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.

[0012] In one embodiment of the present disclosure, the method further includes: receiving a node expansion request for a first node in the last level of the Sankey diagram, wherein the node expansion request includes node data of a second node to be added; determining the level information of the second node based on the level information of the first node; and rendering the second node and the edge between the first node and the second node onto the page based on the node layout information of the first node, the level information of the second node and the node data of the second node.

[0013] In one embodiment of the present disclosure, rendering the second node and the edge between the first node and the second node onto the page according to the node layout information of the first node, the hierarchical information of the second node and the node data of the second node includes: determining the node layout information of the second node on the page according to the hierarchical information of the second node and the node data of the second node; determining the height and the third display position of the second node on the page according to the node layout information of the second node on the page; determining the fourth display position of the first node on the page according to the node layout information of the first node; rendering the second node onto the page according to the node layout information of the second node on the page to obtain the second node; and drawing the edge between the first node and the second node between the third display position and the fourth display position with the height of the second node on the page as the width.

[0014] In one embodiment of the present disclosure, determining the hierarchical information of the multiple nodes based on the edge data includes: determining the association relationship between the multiple nodes based on the edge data; and determining the hierarchical information of the multiple nodes based on the association relationship.

[0015] The present disclosure proposes a method for generating a Sankey diagram. In the process of generating the Sankey diagram based on data to be visualized, hierarchical information of multiple nodes is determined according to edge data in the data to be visualized, and node layout information of each of the multiple nodes on a page is determined according to the node data and the hierarchical information in the data to be visualized, and corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information, and finally edges between corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visualized Sankey diagram. Therefore, in the process of generating the Sankey diagram, hierarchical information of multiple nodes is determined based on edge data in the data to be visualized, and node layout information of corresponding nodes and edges between nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, thereby realizing drawing a visualized Sankey diagram based on hierarchical information.

[0016] According to a second aspect of an embodiment of the present disclosure, a device for generating a Sankey diagram is provided, comprising: an acquisition module, configured to acquire data to be visualized in a page, wherein the data to be visualized includes node data and edge data corresponding to each of a plurality of nodes; a first determination 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 hierarchical information; a first rendering module, configured to render corresponding nodes onto the page based on the node layout information according to the hierarchical information; and a generation module, configured to render edges between corresponding nodes onto the page according to the edge data and the node layout information, so as to generate a visualized Sankey diagram.

[0017] In one embodiment of the present disclosure, wherein the node data includes a flow value, the second determination module includes: a first determination unit, configured to determine a target node corresponding to a maximum flow value from the multiple nodes according to the flow values ​​corresponding to each of the multiple nodes; an acquisition unit, configured to acquire an initialized maximum node height, and use the maximum node height as the height of the target node on the page; a second determination unit, configured to determine a scale according to the height of the target node on the page and the maximum flow value; a third determination unit, configured to determine, for a node other than the target node among the multiple nodes, the height of the node according to the flow value of the node and the scale; and a fourth determination unit, configured to determine, for each node, the node layout information of the node according to the hierarchical information of the node and the height of the node.

[0018] In one embodiment of the present disclosure, the fourth determination unit is specifically configured to: obtain initialization information preset for the page, wherein the initialization information includes node width and node spacing; determine the vertex coordinate information of the node according to the node's hierarchical information, the node width, the node spacing and the node's height; determine the node layout information of the node according to the node's vertex coordinate information.

[0019] In one embodiment of the present disclosure, the second determining unit is specifically configured to: obtain a ratio of the height of the target node on the page to the maximum traffic value, and determine the ratio as the scale.

[0020] In one embodiment of the present disclosure, the vertex coordinate information of the node is determined according to the node's level information, the node width, the node spacing and the node's height, and the second determination module is specifically configured to: determine the upper left vertex coordinate information of the node according to the node's level information and the node spacing; determine the upper right vertex coordinate information of the node according to the node's level information, the node spacing and the node width; determine the lower left vertex coordinate information of the node according to the node's level information, the node spacing and the node's height; determine the lower right vertex coordinate information of the node according to the node's level information, the node width, the node spacing and the node's height.

[0021] In one embodiment of the present disclosure, the device also includes: the generation module, which is specifically configured to: for each node, obtain the parent node and the child node of the node according to the edge data of the node; determine the first display position of the parent node on the page according to the node layout information of the parent node; determine the second display position and height of the child node on the page according to the node layout information of the child node; draw an edge with the height of the child node as the width between the first display position and the second display position to generate a visual Sankey diagram.

[0022] In one embodiment of the present disclosure, the device also includes: a first receiving module, configured to receive a trigger operation on a target node in the Sankey diagram; a response module, configured to perform upstream and downstream searches on the target node in response to the trigger operation to obtain all nodes and edges in the Sankey diagram that have an association relationship with the target node; an adjustment module, configured to adjust the display style of all 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.

[0023] In one embodiment of the present disclosure, the device also includes: a second receiving module, configured to receive a node expansion request for a first node in the last level of the Sankey diagram, wherein the node expansion request includes node data of a second node to be added; a third determination module, configured to determine the level information of the second node based on the level information of the first node; and a second rendering module, configured to render the second node and the edge between the first node and the second node onto the page based on the node layout information of the first node, the level information of the second node and the node data of the second node.

[0024] In one embodiment of the present disclosure, the second rendering module is specifically configured to: determine the node layout information of the second node on the page according to the hierarchical information of the second node and the node data of the second node; determine the height and the third display position of the second node on the page according to the node layout information of the second node on the page; determine the fourth display position of the first node on the page according to the node layout information of the first node; render the second node onto the page according to the node layout information of the second node on the page to obtain the second node; and draw the edge between the first node and the second node between the third display position and the fourth display position with the height of the second node on the page as the width.

[0025] In one embodiment of the present disclosure, the first determination module is specifically configured to: determine the association relationship between the multiple nodes based on the edge data; and determine the hierarchical information of the multiple nodes based on the association relationship.

[0026] The present disclosure proposes a device for generating a Sankey diagram. In the process of generating the Sankey diagram based on data to be visualized, the hierarchical information of multiple nodes is determined according to the edge data in the data to be visualized, and the node layout information of each of the multiple nodes on the page is determined according to the node data and the hierarchical information in the data to be visualized, and the corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information, and finally the edges between the corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visualized Sankey diagram. Therefore, in the process of generating the Sankey diagram, the hierarchical information of multiple nodes is determined based on the edge data in the data to be visualized, and the node layout information of the corresponding nodes and the edges between the nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, thereby realizing the drawing of a visualized Sankey diagram based on the hierarchical information.

[0027] A third aspect of an embodiment of the present disclosure proposes an electronic device, comprising: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement the method for generating a Sankey diagram in an embodiment of the present disclosure.

[0028] A fourth aspect of an embodiment of the present disclosure proposes a storage medium. When instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the method for generating a Sankey diagram in the embodiment of the present disclosure.

[0029] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0031] Figure 1 The present invention is a flowchart of a method for generating a Sankey diagram according to an exemplary embodiment.

[0032] Figure 2 The figure is a flowchart of a method for generating a Sankey diagram according to another exemplary embodiment.

[0033] Figure 3 The figure is a flowchart of a method for generating a Sankey diagram according to another exemplary embodiment.

[0034] Figure 4 The invention is a block diagram of a device for generating a Sankey diagram according to an exemplary embodiment.

[0035] Figure 5 The invention is a block diagram of another device for generating a Sankey diagram according to an exemplary embodiment.

[0036] Figure 6 The present invention is a block diagram of an electronic device showing a device for generating a Sankey diagram according to an exemplary embodiment. DETAILED DESCRIPTION

[0037] The following is a description of exemplary embodiments of the present disclosure in conjunction with the accompanying drawings, including various details of the embodiments of the present disclosure to facilitate understanding, which should be considered as merely exemplary. Therefore, it should be recognized by those of ordinary skill in the art that various changes and modifications may be made to the embodiments described herein without departing from the scope and spirit of the present disclosure. Similarly, for the sake of clarity and conciseness, descriptions of well-known functions and structures are omitted in the following description.

[0038] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0039] A method, device, electronic device, and storage medium for generating a Sankey diagram according to an embodiment of the present disclosure will be described below with reference to the accompanying drawings.

[0040] Figure 1 is a flow chart of a method for generating a Sankey diagram according to an exemplary embodiment. Figure 1 As shown, the method for generating the Sankey diagram may include:

[0041] In step S11, the data to be visualized in the page is obtained, wherein the data to be visualized includes node data and edge data corresponding to each of a plurality of nodes.

[0042] It should be noted that the method for generating a Sankey diagram in this embodiment is executed by a device for generating a Sankey diagram, and the device for generating a Sankey diagram can be implemented by software and / or hardware. The device for generating a Sankey diagram in this embodiment can be configured in an electronic device, and the electronic device in this embodiment may include a server, etc. This embodiment does not specifically limit the electronic device.

[0043] In step S12, the hierarchical information of the plurality of nodes is determined according to the edge data.

[0044] In some embodiments, an implementation method of determining the hierarchical information of multiple nodes based on edge data is: determining the association relationship between the multiple nodes based on the edge data, and then determining the hierarchical information of the multiple nodes based on the association relationship.

[0045] In some embodiments, the edge data is used to represent the connection relationship between nodes. Specifically, the hierarchical relationship of the multiple nodes can be determined based on the connection relationship between the nodes.

[0046] As an exemplary implementation, the connection relationship between nodes may be represented by an edge data structure. That is, in some embodiments, the hierarchical information of multiple nodes may be determined based on the edge data structure.

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

[0048] For example, the data structure that can be passed in by the edge based on the node is:

[0049]

[0050] Based on the data structure of the above edges, the hierarchical information of the above three nodes a, b and c can be determined as follows: a is the root node, bc is the secondary node.

[0051] For example, the data structure that can be passed in based on the edge of the node is:

[0052]

[0053] Based on the data structure of the above edges, the hierarchical information of the above three nodes a, b and c can be determined as follows: a is the root node, b is the second-level node, and c is the third-level node.

[0054] In step S13, node layout information of each of the multiple nodes on the page is determined according to the node data and the level information.

[0055] In step S14, the corresponding node is rendered onto the page based on the level information and the node layout information.

[0056] Specifically, according to the hierarchical information of each node, the nodes may be rendered onto the page layer by layer based on the node layout information of the corresponding node, so as to achieve rendering the nodes onto the page layer by layer.

[0057] In some embodiments, according to the above-mentioned hierarchical information and node layout information, the corresponding nodes are rendered onto the page by native drawing (Scalable Vector Graphics, SVG), and the native drawing method is as follows:

[0058] Among them, SVG is scalable vector graphics, which is an XML-based markup language used to describe two-dimensional vector graphics.

[0059] Node drawing:

[0060] Traverse the node layout information to get the coordinates, width and height. First, draw the outer rectangle through the rect element. At the same time, the foreignObject tag is built in to support node style customization through HTML templates.

[0061] Among them, the browser svg technology can directly draw: <rect>Tag, so that the outer rectangle is drawn through the rect element.

[0062] Among them, the foreignObject tag and the rect tag are tags provided by svg and can be nested with each other, for example:

[0063]

[0064] In some embodiments, the area in foreignObject can be written with HTML tags and CSS styles, based on which the style of the node is customized. <rect>It can only make simple shapes and interactions, and cannot achieve complex customization, such as putting a video in a node and writing an animation effect in it.

[0065] Drawing of edges:

[0066] After the nodes are drawn, the data values ​​of the upstream and downstream nodes are used to start drawing the edges with the data distribution ratio. It is only necessary to calculate the conversion ratio, perform coordinate calculations, and draw the cubic Bezier curve. The conversion ratio is calculated as follows:

[0067] Conversion ratio = downstream node / upstream node value

[0068] Among them, the Bezier curve is based on a rule to draw a regular curve and is widely used in curve design.

[0069] Among them, after the upper node is drawn, the coordinate information of the four points of the current node and the hierarchical information of the current node are saved and saved in the node object. Then, you only need to use the edge data structure to directly find the upstream and downstream node IDs, and then access the value of the corresponding node through the ID to obtain the data value of the upstream and downstream nodes.

[0070] To draw a cubic Bezier curve, you need to know the flow ratio of the node layout, so you need to calculate the conversion ratio. Take the node data structure as an example.

[0071]

[0072] This means that 50% of the traffic in node 1 flows to node 2. If you want to use the node height to convert the corresponding traffic proportion, then the height of node 1 is MaxHeight, and the height of node 2 is MaxHeight / 2. Finally, recalculate the layout of all nodes (update the coordinates), so that you can clearly understand the proportion of traffic from the node layout.

[0073] Drawing of Tooltip:

[0074] Bind events to nodes and edges. When the mouse enters, record the current coordinates as the origin of the upper left corner. Then customize the Tooltip style through HTML.

[0075] In some embodiments, Tooltip refers to a small white box that pops up when the computer mouse enters some pie charts.

[0076] Among them, the current coordinates are the current position of the mouse, provided that the mouse has entered the node. If it is moved out of the node, it will no longer be recorded. The tooltip is only displayed when the node is hovered, and after the mouse enters the node, the coordinates of the mouse are used as the upper left corner coordinates of the tooltip. There is no node / edge and no tooltip.

[0077] In some embodiments, the node / edge area is limited. Often, the node and edge information contains a large amount of business information that needs to be displayed. At this time, the node / edge area cannot accommodate this information and another area is required for display. Therefore, a tooltip needs to be drawn.

[0078] In step S15, the edges between corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visual Sankey diagram.

[0079] In some embodiments, edges between corresponding nodes are rendered onto a page based on edge data and node layout information to generate a visual Sankey diagram. One possible implementation is as follows: for each node, the parent node and child node of the node are obtained based on the edge data of the node, and the first display position of the parent node on the page and the second display position and height of the child node on the page are determined based on the node layout information, and an edge with the height of the child node as the width is drawn between the first display position and the second display position.

[0080] The present disclosure proposes a method for generating a Sankey diagram. In the process of generating the Sankey diagram based on data to be visualized, hierarchical information of multiple nodes is determined according to edge data in the data to be visualized, and node layout information of each of the multiple nodes on a page is determined according to the node data and the hierarchical information in the data to be visualized, and corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information, and finally edges between corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visualized Sankey diagram. Therefore, in the process of generating the Sankey diagram, hierarchical information of multiple nodes is determined based on edge data in the data to be visualized, and node layout information of corresponding nodes and edges between nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, thereby realizing drawing a visualized Sankey diagram based on hierarchical information.

[0081] Based on the above embodiments, in the process of triggering a node in a Sankey diagram, only the node, the parent node and the child node of the node are highlighted in the Sankey diagram in the related technology. However, in a big data scenario, when there are many nodes, only three nodes are highlighted, and all related upstream and downstream nodes cannot be found at a glance, resulting in very low efficiency of data analysis. In order to help analysts directly analyze all related upstream and downstream relationship nodes and traffic distribution, and improve analysis efficiency. After rendering the edges between corresponding nodes on the page based on edge data to generate a visual Sankey diagram, the method also includes: receiving a trigger operation on a target node in the Sankey diagram, responding to the trigger operation, searching upstream and downstream for the target node to obtain all nodes and edges in the Sankey diagram that have an association relationship with the target node, and adjusting the display style of all found nodes and edges from the first display style to the second display style. Therefore, when a trigger operation of a target node of a Sankey diagram is received, an upstream and downstream search is performed on the target node to obtain nodes and edges with which the target node is associated, and the display style of all nodes and edges is adjusted from the first display style to the second display style, thereby realizing a built-in full-link highlight display function.

[0082] Specifically, the generated Sankey diagram highlighting function is: when a node is clicked, two recursive methods are performed simultaneously to search upstream and downstream, find and save the identifiers of all related nodes and edges, find the nodes and edges according to the identifiers, modify the style, dynamically highlight the nodes and edges, and finally weaken the styles of all remaining nodes and edges to achieve a simulated highlighting effect.

[0083] As an exemplary embodiment, the method for generating a Sankey diagram also includes: rendering the corresponding node onto the page based on the node layout information according to the hierarchical information, which may be: receiving a node expansion request for the first node in the last level of the Sankey diagram, wherein the node expansion request includes node data of a second node to be added, determining the hierarchical information of the second node according to the hierarchical information of the first node, and rendering the second node and the edge between the first node and the second node onto the page according to the hierarchical information and node data of the second node.

[0084] In some embodiments, the second node and the edge between the first node and the second node are rendered onto the page based on the hierarchical information and node data of the second node. The method includes: determining the node layout information of the second node on the page based on the hierarchical information and node data of the second node; rendering the second node onto the page based on 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 based on the node layout information of the second node on the page; and drawing the edge between the first node and the second node based on the height of the second node on the page.

[0085] Specifically, this embodiment also provides an expansion support function. For example, when it is necessary to expand more nodes and edges in the horizontal level / vertical level, it is only necessary to change the corresponding data source, recalculate the layout, draw, and bind the interaction events according to the data changes.

[0086] The way to change the data source is to first input the data structure of the node / edge, for example:

[0087] node:

[0088]

[0089] side:

[0090]

[0091] Only these two data sources can determine the calculation of the corresponding layout and chart. At the same time, as long as the data source is changed in the code, or the backend directly returns the changed data source and directly passes it into the library for use, changes can be made.

[0092] In this embodiment, the binding interaction event can be bound through JS, for example:

[0093] First delete the time of the original element, api: removeEventListener, and then rebind the new event to all elements, api: addEventListener.

[0094] Because the data source changes =》chart structure changes =》nodes may increase, disappear, or shift. At this time, the chart is re-rendered and the click event, tooltip mouse move event, etc. are re-binded to realize the binding of interactive events.

[0095] Figure 2 is a flow chart of a method for generating a Sankey diagram according to another exemplary embodiment. Figure 2 As shown, the method for generating the Sankey diagram may include:

[0096] In step S21, the data to be visualized in the page is obtained, wherein the data to be visualized includes node data and edge data corresponding to each of a plurality of nodes.

[0097] In step S22, the hierarchical information of the plurality of nodes is determined according to the edge data.

[0098] In step S23, according to the flow values ​​corresponding to the multiple nodes, a target node corresponding to the maximum flow rate is determined from the multiple nodes.

[0099] In some embodiments, the node data includes the current traffic size of the node, the traffic distribution trend of the node, etc. In this embodiment, the target node with the largest traffic value among multiple nodes is determined based on the current traffic value corresponding to the node.

[0100] In step S24, the initialized maximum height of the node is obtained, and the maximum height of the node is used as the height of the target node on the page.

[0101] In some embodiments, in a big data scenario, the data may be spaced too far apart. If the maximum node height is set too high, the nodes and edges cannot interact. Therefore, the maximum height of the node must be preset as the height of the target node on the page. The preset maximum height of the node can be the initialized maximum height of the node, but is not limited to this.

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

[0103] In some embodiments, one implementation of determining the scale based on the height of the target node on the page and the maximum flow rate is to obtain the ratio of the height of the target node on the page to the maximum flow rate, and determine the ratio as the scale.

[0104] In some embodiments, to accurately calculate the size of the scale, the method is as follows: Since the node needs to directly display the current stage traffic size, the general node height represents the proportion of the share, so the node height needs to be dynamically calculated. If the maximum node height MaxHeight is passed in during initialization, it is necessary to traverse and calculate the maximum value node MaxValue during the data initialization phase, and then calculate the scale to convert the height of other nodes. The scale calculation is publicized as follows:

[0105] Scale (scale) = maximum node height (MaxHeight) / maximum value node (MaxValue)

[0106] Among them, the node height means the traffic distribution ratio. For example, the Sankey diagram represents the data traffic. For example, if the current traffic initial node is 100, then it will definitely flow to each node in the second layer, and the sum of each node is also 100.

[0107] A Sankey diagram refers to a specific type of flowchart in visualization, where the branch width corresponds to the size of the data flow, and is commonly used in visualization analysis in various industries.

[0108] The implementation method of converting the height of other nodes by using a scale may be:

[0109] The data structure of the node initially passed in

[0110]

[0111] MaxValue is the 2 obtained by traversal. If MaxHeight is 100, then the height of node-1 is 100, and the scale is:

[0112] scale = 100 / 2 = 50

[0113] The height of node-2 is:

[0114] node-2.value*scale=>1*50=50

[0115] But scale alone is not enough. In fact, in big data scenarios, data may be "too far apart". For example, the data pool may be in units of 100 million or single digits. After conversion through the scale, the node height in single digits is already much smaller than 1px, which is not possible in a browser environment. Moreover, if the maximum node height is set too high, nodes and edges cannot interact. Therefore, a minimum height threshold must be set to achieve friendly analysis and interaction with visualization at the expense of precision.

[0116] In step S26, for a node other than the target node among the multiple nodes, the height of the node is determined according to the flow value and scale of the node.

[0117] Specifically, the height of a node is determined according to the scale and the flow value of a node other than the target node.

[0118] In step S27, for each node, node layout information of the node is determined according to the level information of the node and the height of the node.

[0119] In some embodiments of the present disclosure, in order to accurately determine the node layout information of a node, the node layout information of the node is determined according to the node level information and the node height. The method includes: obtaining initialization information preset for the page, wherein the initialization information includes node width and node spacing, and determining the vertex coordinate information of the node according to the node level information, node width, node spacing and node height.

[0120] In some embodiments, one implementation method of determining the vertex coordinate information of a node based on the node's hierarchy information, node width, node spacing, and node height is to determine the upper left vertex coordinate information of the node based on the node's hierarchy information and node spacing, and at the same time determine the upper right vertex coordinate information of the node based on the node's hierarchy information, node spacing, and node width, and also determine the lower left vertex coordinate information of the node based on the node's hierarchy information, node spacing, and node height, and determine the lower right vertex coordinate information of the node based on the node's hierarchy information, node width, node spacing, and node height.

[0121] In other embodiments, in order to accurately determine the vertex coordinate information of the node, the coordinate position calculation can be performed based on the width of the node passed in at the time of initialization, the upper and lower spacing, left and right spacing between the nodes, and other configurations. The initial position starts from the upper left corner of the canvas, and the coordinates of each node are calculated in turn according to the spacing and width, and the current level is recorded at the same time, and finally the two-dimensional coordinates of all nodes are stored in the node object. Specifically, in order to accurately calculate the coordinates of each node in turn according to the spacing and width, as an exemplary implementation method: there will be some configurations at the beginning, including the width w of the node and the node spacing p, and a default height h of a node is set internally, starting from the upper left corner origin (0, 0), and then the level of the current node (nth row and nth column) is calculated according to the passed in data structure, and its upper left corner coordinates are (np, np), upper right corner (np+nw, np), lower left corner (np, np+nh), lower right corner (np+nw, np+nh), and so on.

[0122] Among them, if the node height is configured to change according to the traffic ratio, the data structure must be traversed first to calculate the height of each node at each level, and then the h above must be replaced when calculating the coordinates of each node.

[0123] In step S28, the corresponding node is rendered onto the page based on the level information and the node layout information.

[0124] In step S29, the edges between corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visual Sankey diagram.

[0125] The present disclosure proposes a method for generating a Sankey diagram. In the process of generating the Sankey diagram based on data to be visualized, hierarchical information of multiple nodes is determined according to edge data in the data to be visualized, and node layout information of each of the multiple nodes on a page is determined according to the node data and the hierarchical information in the data to be visualized, and corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information, and finally edges between corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visualized Sankey diagram. Therefore, in the process of generating the Sankey diagram, hierarchical information of multiple nodes is determined based on edge data in the data to be visualized, and node layout information of corresponding nodes and edges between nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, thereby realizing drawing a visualized Sankey diagram based on hierarchical information.

[0126] Figure 3 is a flow chart of a method for generating a Sankey diagram according to another exemplary embodiment. Figure 3 As shown, the method for generating the Sankey diagram may include:

[0127] Step S31, obtaining data to be visualized in the page, wherein the data to be visualized includes node data and edge data corresponding to each of a plurality of nodes.

[0128] Step S32, determining the level information of multiple nodes according to the edge data.

[0129] Step S33, determining node layout information of each of the multiple nodes on the page according to the node data and the level information.

[0130] Step S34, rendering the corresponding node onto the page based on the level information and the node layout information.

[0131] It should be noted that, for the specific implementation of steps S31 to S34, reference may be made to the relevant description in the above embodiments.

[0132] Step S35, for each node, obtain the parent node and child nodes of the node according to the edge data of the node.

[0133] Step S36: Determine the first display position of the parent node on the page according to the node layout information of the parent node.

[0134] Step S37, determining a second display position and height of the sub-node on the page according to the node layout information of the sub-node.

[0135] Step S38, drawing an edge with a width of the height of the child node between the first display position and the second display position to generate a visual Sankey diagram.

[0136] The present disclosure proposes a method for generating a Sankey diagram. In the process of generating the Sankey diagram based on data to be visualized, the hierarchical information of multiple nodes is determined according to the edge data in the data to be visualized, and the node layout information of each of the multiple nodes on the page is determined according to the node data and the hierarchical information in the data to be visualized, and the corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information. Finally, for each node, the parent node and the child node of the node are obtained, and the display position and height of the parent node and the child node on the page are determined according to the layout information of the parent node and the child node, so as to generate a visualized Sankey diagram. Therefore, in the process of generating the Sankey diagram, the hierarchical information of multiple nodes is determined based on the edge data in the data to be visualized, and the node layout information of the corresponding nodes and the edges between the nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, so as to realize drawing a visualized Sankey diagram based on the edge data and the node layout information.

[0137] Figure 4 FIG. 1 is a block diagram of a Sankey diagram generation device 140 according to an exemplary embodiment. Figure 4 The device 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.

[0138] The acquisition module 141 is configured to acquire the data to be visualized in the page, wherein the visualization data includes node data and edge data corresponding to each of the multiple nodes.

[0139] The first determination module 142 is configured to determine the level information of multiple nodes according to the edge data.

[0140] The second determination module 143 is configured to determine node layout information of each of the multiple nodes on the page according to the node data and the level information.

[0141] The first rendering module 144 is configured to render the corresponding node onto the page according to the level information and the node layout information.

[0142] The generation module 145 is configured to render the edges between corresponding nodes onto a page according to the edge data and the node layout information to generate a visual Sankey diagram.

[0143] The present disclosure proposes a device for generating a Sankey diagram. In the process of generating the Sankey diagram based on data to be visualized, the hierarchical information of multiple nodes is determined according to the edge data in the data to be visualized, and the node layout information of each of the multiple nodes on the page is determined according to the node data and the hierarchical information in the data to be visualized, and the corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information, and finally the edges between the corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visualized Sankey diagram. Therefore, in the process of generating the Sankey diagram, the hierarchical information of multiple nodes is determined based on the edge data in the data to be visualized, and the node layout information of the corresponding nodes and the edges between the nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, thereby realizing the drawing of a visualized Sankey diagram based on the hierarchical information.

[0144] In one embodiment of the present disclosure, Figure 5 As shown, the second determination module 143 includes:

[0145] The first determining unit 1431 is configured to determine a target node corresponding to a maximum flow rate from a plurality of nodes according to flow rates corresponding to the plurality of nodes respectively.

[0146] The acquisition unit 1432 is configured to acquire the initialized maximum height of the node and use the maximum height of the node as the height of the target node on the page.

[0147] The second determining unit 1433 is configured to determine a scale according to the height of the target node on the page and the maximum flow rate.

[0148] The third determining unit 1434 is configured to determine, for a node other than the target node among the multiple nodes, a height of the node according to a flow value and a scale of the node.

[0149] The fourth determining unit 1435 is configured to determine, for each node, node layout information of the node according to the level information of the node and the height of the node.

[0150] In one embodiment of the present disclosure, Figure 5 As shown, the fourth determining unit 1435 is specifically configured as follows:

[0151] The initialization information preset for the page is obtained, wherein the initialization information includes node width and node spacing.

[0152] The vertex coordinate information of the node is determined according to the node's level information, node width, node spacing, and node height.

[0153] The node layout information of the node is determined according to the vertex coordinate information of the node.

[0154] In one embodiment of the present disclosure, Figure 5 As shown, the second determining unit 1433 is specifically configured as follows:

[0155] The ratio of the height of the target node on the page to the maximum flow rate is obtained, and the ratio is determined as the scale.

[0156] In one embodiment of the present disclosure, Figure 5 As shown, according to the node level information, node width, node spacing and node height, the vertex coordinate information of the node is determined, and the second determination module 143 is specifically configured as follows:

[0157] Determine the coordinate information of the upper left vertex of the node based on the node's level information and node spacing.

[0158] Determine the coordinate information of the upper right vertex of the node according to the node's level information, node spacing, and node width.

[0159] Determine the coordinate information of the lower left vertex of the node according to the node's level information, node spacing, and node height.

[0160] The coordinate information of the lower right vertex of the node is determined according to the node's level information, node width, node spacing, and node height.

[0161] In one embodiment of the present disclosure, Figure 5 As shown, the generating module 145 is specifically configured as follows:

[0162] For each node, get the parent node and child nodes of the node according to the edge data of the node.

[0163] According to the node layout information of the parent node, the first display position of the parent node on the page is determined.

[0164] According to the node layout information of the child node, a second display position and height of the child node on the page are determined.

[0165] An edge having a width equal to the height of the child node is drawn between the first display position and the second display position to generate a visual Sankey diagram.

[0166] In one embodiment of the present disclosure, Figure 5 As shown, the device also includes:

[0167] The first receiving module 146 is configured to receive a trigger operation on a target node in the Sankey diagram.

[0168] The response module 147 is configured to perform upstream and downstream searches on the target node in response to the trigger operation to obtain all nodes and edges in the Sankey diagram that have an association relationship with the target node.

[0169] The adjustment module 148 is configured to adjust the display styles of all 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.

[0170] In one embodiment of the present disclosure, Figure 5 As shown, the device also includes:

[0171] The second receiving module 149 is configured to receive a node expansion request for a first node in the last level of the Sankey diagram, wherein the node expansion request includes node data of a second node to be added.

[0172] The third determination module 1410 is configured to determine the level information of the second node according to the level information of the first node.

[0173] The second rendering module 1411 is configured to render the second node and the edge between the first node and the second node onto the page according to the node layout information of the first node, the level information of the second node and the node data of the second node.

[0174] In one embodiment of the present disclosure, Figure 5 As shown, the second rendering module 1411 is specifically configured as follows:

[0175] Node layout information of the second node on the page is determined according to the level information of the second node and the node data of the second node.

[0176] According to the node layout information of the second node on the page, the height and the third display position of the second node on the page are determined.

[0177] A fourth display position of the first node on the page is determined according to the node layout information of the first node.

[0178] According to the node layout information of the second node on the page, the second node is rendered on the page to obtain the second node.

[0179] An edge between the first node and the second node is drawn between the third display position and the fourth display position with the height on the second node page as the width.

[0180] In one embodiment of the present disclosure, Figure 5 As shown, the first determination module 142 is specifically configured as follows:

[0181] According to the edge data, the association relationship between multiple nodes is determined.

[0182] According to the association relationship, the hierarchical information of multiple nodes is determined.

[0183] The present disclosure proposes a device for generating a Sankey diagram. In the process of generating the Sankey diagram based on data to be visualized, the hierarchical information of multiple nodes is determined according to the edge data in the data to be visualized, and the node layout information of each of the multiple nodes on the page is determined according to the node data and the hierarchical information in the data to be visualized, and the corresponding nodes based on the node layout information are rendered on the page according to the hierarchical information, and finally the edges between the corresponding nodes are rendered on the page according to the edge data and the node layout information to generate a visualized Sankey diagram. Therefore, in the process of generating the Sankey diagram, the hierarchical information of multiple nodes is determined based on the edge data in the data to be visualized, and the node layout information of the corresponding nodes and the edges between the nodes are rendered on the page based on the hierarchical information to generate a visualized Sankey diagram, thereby realizing the drawing of a visualized Sankey diagram based on the hierarchical information.

[0184] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0185] In order to implement the above embodiment, the embodiment of the present disclosure further proposes an electronic device, wherein the electronic device comprises: a processor; a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement the above method for generating a Sankey diagram.

[0186] As an example, Figure 6 is a block diagram of an electronic device 160 for generating a Sankey diagram according to an exemplary embodiment. Figure 6 As shown, the electronic device 160 may further include:

[0187] The memory 161 and the processor 162, a bus 163 connecting different components (including the memory 161 and the processor 162), the memory 161 stores a computer program, and when the processor 162 executes the program, the method for generating the Sankey diagram of the embodiment of the present disclosure is implemented.

[0188] Bus 163 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor or a local bus using any of a variety of bus architectures. For example, these 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.

[0189] The electronic device 160 typically includes a variety of electronic device readable media. These media can be any available media that can be accessed by the electronic device 160, including volatile and non-volatile media, removable and non-removable media.

[0190] The 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 / non-volatile computer system storage media. By way of example only, the storage system 166 may be used to read and write non-removable, non-volatile magnetic media ( Figure 6 not shown, usually called a "hard drive"). Although Figure 6 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk"), and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, a DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 163 via one or more data medium 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 perform the functions of the various embodiments of the present disclosure.

[0191] A program / utility 168 having a set (at least one) of program modules 167 may be stored, for example, in the memory 161. Such program modules 167 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment. The program modules 167 generally perform the functions and / or methods of the embodiments described in the present disclosure.

[0192] The electronic device 160 may also communicate with one or more external devices 169 (e.g., keyboard, pointing device, display 1691, etc.), may also communicate with one or more devices that enable a user to interact with the electronic device 160, and / or communicate with any device that enables the electronic device 160 to communicate with one or more other computing devices (e.g., network card, modem, etc.). Such communication may be performed via an input / output (I / O) interface 1692. In addition, the electronic device 160 may also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN) and / or public network, such as the Internet) via a network adapter 1693. As shown, the network adapter 1693 communicates with other modules of the electronic device 160 via the bus 163. It should be understood that, although not shown in the figure, other hardware and / or software modules may be used in conjunction with the 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.

[0193] The processor 160 executes various functional applications and data processing by running programs stored in the memory 161 .

[0194] In one embodiment, the processor 162 may be configured to execute the method for generating a Sankey diagram according to the first aspect of the present disclosure.

[0195] In another embodiment, the processor 162 may be configured to execute the method for generating a Sankey diagram according to the second aspect of the present disclosure.

[0196] It should be noted that the aforementioned explanation of the embodiment of the method for generating a Sankey diagram is also applicable to the device for generating a Sankey diagram of this embodiment, and this embodiment does not specifically limit this.

[0197] In an exemplary embodiment, a storage medium including instructions is also provided, such as a memory including instructions, and the instructions can be executed by the processor 162 of the device 160 to complete the above method. Optionally, the storage medium can be a non-transitory computer-readable storage medium, for example, the non-transitory computer-readable storage medium can be a ROM, a random access memory (RAM), a CD-ROM, a magnetic tape, a floppy disk, an optical data storage device, etc.

[0198] In an exemplary embodiment, a computer program product is also provided. When the computer program is executed by a processor of an electronic device, the electronic device can execute the method for generating a Sankey diagram as described in the first aspect, or the device for generating a Sankey diagram as described in the second aspect.

[0199] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present disclosure. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, unless they are contradictory.

[0200] In addition, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include at least one of the features. In the description of the present disclosure, "plurality" means at least two, such as two, three, etc., unless otherwise clearly and specifically defined.

[0201] Any process or method description in a flowchart or otherwise described herein may be understood to represent a module, segment or portion of code that includes one or more executable instructions for implementing the steps of a custom logical function or process, and the scope of the preferred embodiments of the present disclosure includes additional implementations in which functions may not be performed in the order shown or discussed, including performing functions in a substantially simultaneous manner or in reverse order depending on the functions involved, which should be understood by technicians in the technical field to which the embodiments of the present disclosure belong.

[0202] The logic and / or steps represented in the flowchart or otherwise described herein, for example, can be considered as an ordered list of executable instructions for implementing logical functions, and can be embodied in any computer-readable medium for use by an instruction execution system, device or apparatus (such as a computer-based system, a system including a processor, or other system that can fetch instructions from an instruction execution system, device or apparatus and execute the instructions), or in combination with these instruction execution systems, devices or apparatuses. For the purpose of this specification, "computer-readable medium" can be any device that can contain, store, communicate, propagate or transmit a program for use by an instruction execution system, device or apparatus, or in combination with these instruction execution systems, devices or apparatuses. More specific examples of computer-readable media (a non-exhaustive list) include the following: an electrical connection with one or more wires (electronic device), a portable computer disk box (magnetic device), a random access memory (RAM), a read-only memory (ROM), an erasable and programmable read-only memory (EPROM or flash memory), a fiber optic device, and a portable compact disk read-only memory (CDROM). In addition, the computer-readable medium may even be paper or other suitable medium on which the program is printed, since the program may be obtained electronically, for example, by optically scanning the paper or other medium and then editing, interpreting or otherwise processing in a suitable manner if necessary, and then stored in a computer memory.

[0203] It should be understood that the various parts of the present disclosure can be implemented in hardware, software, firmware or a combination thereof. In the above-mentioned embodiments, multiple steps or methods can be implemented in software or firmware stored in a memory and executed by a suitable instruction execution system. For example, if implemented in hardware, as in another embodiment, any one of the following technologies known in the art or a combination thereof can be used to implement: a discrete logic circuit having a logic gate circuit for implementing a logic function for a data signal, a dedicated integrated circuit having a suitable combination of logic gate circuits, a programmable gate array (PGA), a field programmable gate array (FPGA), etc.

[0204] A person skilled in the art may understand that all or part of the steps in the method for implementing the above-mentioned embodiment may be completed by instructing related hardware through a program, and the program may be stored in a computer-readable storage medium, which, when executed, includes one or a combination of the steps of the method embodiment.

[0205] In addition, each functional unit in each embodiment of the present disclosure may be integrated into a processing module, or each unit may exist physically separately, or two or more units may be integrated into one module. The above-mentioned integrated module may be implemented in the form of hardware or in the form of a software functional module. If the integrated module is implemented in the form of a software functional module and sold or used as an independent product, it may also be stored in a computer-readable storage medium.

[0206] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. The present disclosure is intended to cover any variations, uses or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The description and examples are to be considered exemplary only, and the true scope and spirit of the present disclosure are indicated by the claims above.

[0207] It should be understood that the present disclosure is not limited to the exact structures that have been 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.< / rect> < / rect>

Claims

1. A method for generating a Sankey diagram, characterized in that: include: Acquire data to be visualized in the page, wherein the data to be visualized includes node data and edge data corresponding to each of the multiple nodes, wherein the node data includes a flow value; Determining hierarchical information of the plurality of nodes according to the edge data; According to the flow values ​​corresponding to each of the multiple nodes, a target node corresponding to the maximum flow value is determined from the multiple nodes, the initialized maximum height of the node is used as the height of the target node on the page, and a scale is determined according to the height of the target node on the page and the maximum flow value. For a node other than the target node among the multiple nodes, the height of the node is determined according to the flow value of the node and the scale, and for each node, the node layout information of the node is determined according to the level information of the node and the height of the node; According to the level information, rendering the corresponding node on the page based on the node layout information; The edges between corresponding nodes are rendered onto the page according to the edge data and the node layout information to generate a visual Sankey diagram.

2. The method according to claim 1, characterized in that The determining the node layout information of the node according to the level information of the node and the height of the node includes: Acquire initialization information preset for the page, wherein the initialization information includes node width and node spacing; Determine vertex coordinate information of the node according to the node level information, the node width, the node spacing and the node height; Node layout information of the node is determined according to the vertex coordinate information of the node.

3. The method according to claim 1, characterized in that The determining of the scale according to the height of the target node on the page and the maximum flow rate includes: The ratio of the height of the target node on the page to the maximum flow rate is obtained, and the ratio is determined as the scale.

4. The method according to claim 2, characterized in that: The determining the vertex coordinate information of the node according to the level information of the node, the node width, the node spacing and the height of the node includes: Determine the coordinate information of the upper left vertex of the node according to the level information of the node and the node distance; Determine the coordinate information of the upper right vertex of the node according to the level information of the node, the node spacing and the node width; Determine the coordinate information of the lower left vertex of the node according to the level information of the node, the node spacing and the height of the node; The coordinate information of the lower right vertex of the node is determined according to the level information of the node, the node width, the node spacing and the height of the node.

5. The method according to claim 1, characterized in that The rendering of the edges between the corresponding nodes onto the page according to the edge data and the node layout information to generate a visual Sankey diagram includes: For each node, obtain the parent node and child nodes of the node according to the edge data of the node; Determining a first display position of the parent node on the page according to the node layout information of the parent node; Determining a second display position and height of the subnode on the page according to the node layout information of the subnode; An edge with a height of the child node as a width is drawn between the first display position and the second display position to generate a visual Sankey diagram.

6. The method according to claim 1, characterized in that The method further comprises: Receiving a trigger operation on a target node in the Sankey diagram; In response to the trigger operation, searching upstream and downstream for the target node to obtain all nodes and edges in the Sankey diagram that have an association relationship with the target node; The display styles of all found nodes and edges are adjusted 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.

7. The method according to claim 1, characterized in that The method further comprises: Receiving a node expansion request for a first node in a last level of the Sankey diagram, wherein the node expansion request includes node data of a second node to be added; Determining the level information of the second node according to the level information of the first node; The second node and the edge between the first node and the second node are rendered on the page according to the node layout information of the first node, the level information of the second node and the node data of the second node.

8. The method according to claim 7, characterized in that The rendering of the second node and the edge between the first node and the second node on the page according to the node layout information of the first node, the level information of the second node and the node data of the second node includes: Determine node layout information of the second node on the page according to the level information of the second node and the node data of the second node; Determining a 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, according to the node layout information of the first node, a fourth display position of the first node on the page; Rendering the second node onto the page according to the node layout information of the second node on the page to obtain the second node; An edge between the first node and the second node is drawn between the third display position and the fourth display position, with the height of the second node on the page as the width.

9. The method according to claim 1, characterized in that: The step of determining the level information of the plurality of nodes according to the edge data includes: Determine, according to the edge data, the association relationship between the multiple nodes; According to the association relationship, the hierarchical information of the multiple nodes is determined.

10. A device for generating a Sankey diagram, characterized in that: include: An acquisition module is configured to acquire data to be visualized in a page, wherein the visualization data includes node data and edge data corresponding to each of a plurality of nodes, wherein the node data includes a flow value; A first determination module is configured to determine the level information of the plurality of nodes according to the edge data; The second determination module is configured to determine a target node corresponding to a maximum flow rate from the multiple nodes according to the flow rates corresponding to the multiple nodes respectively, use the initialized maximum height of the node as the height of the target node on the page, determine a scale according to the height of the target node on the page and the maximum flow rate, determine the height of a node other than the target node among the multiple nodes according to the flow rate of the node and the scale, and determine the node layout information of the node for each node according to the level information of the node and the height of the node; A first rendering module is configured to render corresponding nodes onto the page based on the node layout information according to the level information; A generation module is configured to render the edges between corresponding nodes onto the page according to the edge data and the node layout information to generate a visual Sankey diagram.

11. The device according to claim 10, characterized in that The determining the node layout information of the node according to the level information of the node and the height of the node includes: Acquire initialization information preset for the page, wherein the initialization information includes node width and node spacing; Determine vertex coordinate information of the node according to the node level information, the node width, the node spacing and the node height; Node layout information of the node is determined according to the vertex coordinate information of the node.

12. The device according to claim 10, characterized in that The determining of the scale according to the height of the target node on the page and the maximum flow rate includes: The ratio of the height of the target node on the page to the maximum flow rate is obtained, and the ratio is determined as the scale.

13. The device according to claim 11, characterized in that The determining the vertex coordinate information of the node according to the level information of the node, the node width, the node spacing and the height of the node includes: Determine the coordinate information of the upper left vertex of the node according to the level information of the node and the node distance; Determine the coordinate information of the upper right vertex of the node according to the level information of the node, the node spacing and the node width; Determine the coordinate information of the lower left vertex of the node according to the level information of the node, the node spacing and the height of the node; The coordinate information of the lower right vertex of the node is determined according to the level information of the node, the node width, the node spacing and the height of the node.

14. The device according to claim 10, characterized in that The generation module is specifically configured as follows: For each node, obtain the parent node and child nodes of the node according to the edge data of the node; Determining a first display position of the parent node on the page according to the node layout information of the parent node; Determining a second display position and height of the subnode on the page according to the node layout information of the subnode; An edge with a height of the child node as a width is drawn between the first display position and the second display position to generate a visual Sankey diagram.

15. The device according to claim 10, characterized in that The device also includes: A first receiving module is configured to receive a trigger operation on a target node in the Sankey diagram; A response module is configured to perform upstream search and downstream search on the target node in response to the trigger operation to obtain all nodes and edges in the Sankey diagram that have an association relationship with the target node; The adjustment module is configured to adjust the display styles of all 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.

16. The device according to claim 10, characterized in that The device also includes: A second receiving module is configured to receive a node expansion request for a first node in a last level of the Sankey diagram, wherein the node expansion request includes node data of a second node to be added; a third determining module, configured to determine the level information of the second node according to the level information of the first node; The second rendering module is configured to render the second node and the edge between the first node and the second node onto the page according to the node layout information of the first node, the level information of the second node and the node data of the second node.

17. The device according to claim 16, characterized in that The second rendering module is specifically configured as follows: Determine node layout information of the second node on the page according to the level information of the second node and the node data of the second node; Determining a 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, according to the node layout information of the first node, a fourth display position of the first node on the page; Rendering the second node onto the page according to the node layout information of the second node on the page to obtain the second node; An edge between the first node and the second node is drawn between the third display position and the fourth display position, with the height of the second node on the page as the width.

18. The device according to claim 10, characterized in that The first determination module is specifically configured to: Determine, according to the edge data, the association relationship between the multiple nodes; According to the association relationship, the hierarchical information of the multiple nodes is determined.

19. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the method for generating a Sankey diagram according to any one of claims 1 to 9.

20. A storage medium, characterized in that: When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the method for generating a Sankey diagram as described in any one of claims 1 to 9.

Images