桑基图的生成方法、装置、电子设备和存储介质

摘要

本公开提出一种桑基图的生成方法、装置、电子设备和存储介质。该方法包括：根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后根据边数据和节点布局信息将对应节点之间的边渲染到页面上，生成可视化的桑基图，由此，在桑基图生成的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于层级信息来绘制可视化桑基图。

说明书

技术领域

本公开涉及计算机技术领域，尤其涉及一种桑基图的生成方法、装置、电子设备和存储介质。

背景技术

目前，在可视化分析中，桑基图对数据流量分析可以清晰的看到不同节点的各项数据，因此，相关技术中通常基于桑基图进行数据分析和挖掘。

相关技术中，在根据数据绘制桑基图的过程中，已有的桑基图都只能满足于特定数据量级场景下简单分析，在数据量较大的情况下，其形式难定制，交互难分析、布局难拓展都是痛点。因此，在大数据场景下如何生成桑基图是是亟需解决的问题。

发明内容

本公开涉及计算机技术领域，尤其涉及一种桑基图的生成方法、装置、电子设备和存储介质。

根据本公开实施例的第一方面，提供一种桑基图的生成方法，包括：获取页面中待可视化数据，其中，所述待可视化数据包括多个节点各自对应的节点数据以及边数据；根据所述边数据，确定所述多个节点的层级信息；根据所述节点数据和所述层级信息，确定所述多个节点各自在所述页面上的节点布局信息；根据所述层级信息，基于所述节点布局信息将对应节点渲染到所述页面上；根据所述边数据和所述节点布局信息将对应节点之间的边渲染到所述页面上，以生成可视化的桑基图。

在本公开的一个实施例中，其中，所述节点数据包括流量值，所述根据所述节点数据和所述层级信息，确定所述多个节点各自在所述页面上的节点布局信息，包括：根据所述多个节点各自对应的流量值，从所述多个节点中确定出流量最大值对应的目标节点；获取初始化的节点最大高度，并将所述节点最大高度作为所述目标节点在页面上的高度；根据所述目标节点在页面上的高度和所述流量最大值，确定比例尺；对于所述多个节点中除了所述目标节点之外的一个节点，根据所述一个节点的流量值和所述比例尺，确定出所述一个节点的高度；针对每个节点，根据所述节点的层级信息和所述节点的高度，确定所述节点的节点布局信息。

在本公开的一个实施例中，所述根据所述节点的层级信息和所述节点的高度，确定所述节点的节点布局信息，包括：获取为所述页面预设的初始化信息，其中，所述初始化信息包括节点宽度以及节点间距；根据所述节点的层级信息、所述节点宽度、所述节点间距和所述节点的高度，确定所述节点的顶点坐标信息；根据所述节点的顶点坐标信息，确定所述节点的节点布局信息。

在本公开的一个实施例中，所述根据所述目标节点在页面上的高度和所述流量最大值，确定比例尺，包括：获取所述目标节点在所述页面上的高度与所述流量最大值的比值，并将所述比值确定为所述比例尺。

在本公开的一个实施例中，所述根据所述节点的层级信息、所述节点宽度、所述节点间距和所述节点的高度，确定所述节点的顶点坐标信息，包括：根据所述节点的层级信息、所述节点间距，确定所述节点的左上顶点坐标信息；根据所述节点的层级信息、所述节点间距和所述节点宽度，确定所述节点的右上顶点坐标信息；根据所述节点的层级信息、所述节点间距和所述节点的高度，确定所述节点的左下顶点坐标信息；根据所述节点的层级信息、所述节点宽度、所述节点间距和所述节点的高度，确定所述节点的右下顶点坐标信息。

在本公开的一个实施例中，所述根据所述边数据和所述节点布局信息将对应节点之间的边渲染到所述页面上，以生成可视化的桑基图，包括：针对每个节点，根据所述节点的边数据，获取所述节点的父节点以及子节点；根据所述父节点的节点布局信息，确定所述父节点在所述页面上的第一显示位置；根据所述子节点的节点布局信息，确定所述子节点在所述页面上的第二显示位置和高度；在所述第一显示位置和所述第二显示位置之间绘制以所述子节点的高度为宽度的边以生成可视化的桑基图。

在本公开的一个实施例中，在所述基于所述边数据将对应节点之间的边渲染到所述页面上，以生成可视化的桑基图之后，所述方法还包括：接收对所述桑基图中的一个目标节点的触发操作；响应于所述触发操作，对所述目标节点进行向上游查找和向下游查找，以得到所述桑基图中与所述目标节点具有关联关系的所有节点和边；将所找到的所有节点和边的显示样式从第一显示样式调整为第二显示样式，其中，所述第一显示样式和所述第二显示样式的至少一个显示参数不同。

在本公开的一个实施例中，所述方法还包括：接收对所述桑基图的最后一层级中第一节点的节点扩展请求，其中，所述节点扩展请求包括待增加的第二节点的节点数据；根据所述第一节点的层级信息，确定所述第二节点的层级信息；根据所述第一节点的节点布局信息、所述第二节点的层级信息和所述第二节点的节点数据，将所述第二节点、所述第一节点与所述第二节点之间的边渲染到所述页面上。

在本公开的一个实施例中，所述根据所述第一节点的节点布局信息、所述第二节点的层级信息和所述第二节点的节点数据，将所述第二节点、所述第一节点与所述第二节点之间的边渲染到所述页面上，包括：根据所述第二节点的层级信息和所述第二节点的节点数据，确定所述第二节点在所述页面上的节点布局信息；根据所述第二节点在所述页面上的节点布局信息，确定所述第二节点在所述页面上的高度和第三显示位置；根据所述第一节点的节点布局信息，确定所述第一节点在所述页面上的第四显示位置；根据所述第二节点在所述页面上的节点布局信息，将所述第二节点渲染到所述页面上，以得到所述第二节点；在所述第三显示位置和所述第四显示位置之间以所述第二节点所述页面上的高度为宽度，绘制所述第一节点与所述第二节点之间的边。

在本公开的一个实施例中，所述根据所述边数据，确定所述多个节点的层级信息，包括：根据所述边数据，确定所述多个节点之间的关联关系；根据所述关联关系，确定所述多个节点的层级信息。

本公开提出一种桑基图的生成方法，在基于待可视化数据生成桑基图的过程中，根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后根据边数据和节点布局信息将对应节点之间的边渲染到页面上，生成可视化的桑基图，由此，在生成桑基图的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于层级信息来绘制可视化桑基图。

根据本公开实施例的第二方面，提供一种验桑基图的生成装置，包括：获取模块，被配置为获取页面中待可视化数据，其中，所述待可视化数据包括多个节点各自对应的节点数据以及边数据；第一确定模块，被配置为根据所述边数据，确定所述多个节点的层级信息；第二确定模块，被配置为根据所述节点数据和所述层级信息，确定所述多个节点各自在所述页面上的节点布局信息；第一渲染模块，被配置为根据所述层级信息，基于所述节点布局信息将对应节点渲染到所述页面上；生成模块，被配置为根据所述边数据和所述节点布局信息将对应节点之间的边渲染到所述页面上，以生成可视化的桑基图。

在本公开的一个实施例中，其中，所述节点数据包括流量值，所述第二确定模块，包括：第一确定单元，被配置为根据所述多个节点各自对应的流量值，从所述多个节点中确定出流量最大值对应的目标节点；获取单元，被配置为获取初始化的节点最大高度，并将所述节点最大高度作为所述目标节点在页面上的高度；第二确定单元，被配置为根据所述目标节点在页面上的高度和所述流量最大值，确定比例尺；第三确定单元，被配置为对于所述多个节点中除了所述目标节点之外的一个节点，根据所述一个节点的流量值和所述比例尺，确定出所述一个节点的高度；第四确定单元，被配置为针对每个节点，根据所述节点的层级信息和所述节点的高度，确定所述节点的节点布局信息。

在本公开的一个实施例中，所述第四确定单元，具体被配置为：获取为所述页面预设的初始化信息，其中，所述初始化信息包括节点宽度以及节点间距；根据所述节点的层级信息、所述节点宽度、所述节点间距和所述节点的高度，确定所述节点的顶点坐标信息；根据所述节点的顶点坐标信息，确定所述节点的节点布局信息。

在本公开的一个实施例中，所述第二确定单元，具体被配置为：获取所述目标节点在所述页面上的高度与所述流量最大值的比值，并将所述比值确定为所述比例尺。

在本公开的一个实施例中，所述根据所述节点的层级信息、所述节点宽度、所述节点间距和所述节点的高度，确定所述节点的顶点坐标信息，所述第二确定模块，具体被配置为：根据所述节点的层级信息、所述节点间距，确定所述节点的左上顶点坐标信息；根据所述节点的层级信息、所述节点间距和所述节点宽度，确定所述节点的右上顶点坐标信息；根据所述节点的层级信息、所述节点间距和所述节点的高度，确定所述节点的左下顶点坐标信息；根据所述节点的层级信息、所述节点宽度、所述节点间距和所述节点的高度，确定所述节点的右下顶点坐标信息。

在本公开的一个实施例中，所述装置还包括：所述生成模块，具体被配置为：针对每个节点，根据所述节点的边数据，获取所述节点的父节点以及子节点；根据所述父节点的节点布局信息，确定所述父节点在所述页面上的第一显示位置；根据所述子节点的节点布局信息，确定所述子节点在所述页面上的第二显示位置和高度；在所述第一显示位置和所述第二显示位置之间绘制以所述子节点的高度为宽度的边以生成可视化的桑基图。

在本公开的一个实施例中，所述装置还包括：第一接收模块，被配置为接收对所述桑基图中的一个目标节点的触发操作；响应模块，被配置为响应于所述触发操作，对所述目标节点进行向上游查找和向下游查找，以得到所述桑基图中与所述目标节点具有关联关系的所有节点和边；调整模块，被配置为将所找到的所有节点和边的显示样式从第一显示样式调整为第二显示样式，其中，所述第一显示样式和所述第二显示样式的至少一个显示参数不同。

在本公开的一个实施例中所述装置还包括：第二接收模块，被配置为接收对所述桑基图的最后一层级中第一节点的节点扩展请求，其中，所述节点扩展请求包括待增加的第二节点的节点数据；第三确定模块，被配置为根据所述第一节点的层级信息，确定所述第二节点的层级信息；第二渲染模块，被配置为根据所述第一节点的节点布局信息、所述第二节点的层级信息和所述第二节点的节点数据，将所述第二节点、所述第一节点与所述第二节点之间的边渲染到所述页面上。

在本公开的一个实施例中所述第二渲染模块，具体被配置为：根据所述第二节点的层级信息和所述第二节点的节点数据，确定所述第二节点在所述页面上的节点布局信息；根据所述第二节点在所述页面上的节点布局信息，确定所述第二节点在所述页面上的高度和第三显示位置；根据所述第一节点的节点布局信息，确定所述第一节点在所述页面上的第四显示位置；根据所述第二节点在所述页面上的节点布局信息，将所述第二节点渲染到所述页面上，以得到所述第二节点；在所述第三显示位置和所述第四显示位置之间以所述第二节点所述页面上的高度为宽度，绘制所述第一节点与所述第二节点之间的边。

在本公开的一个实施例中所述第一确定模块，具体被配置：根据所述边数据，确定所述多个节点之间的关联关系；根据所述关联关系，确定所述多个节点的层级信息。

本公开提出一种桑基图的生成装置，在基于待可视化数据生成桑基图的过程中，根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后根据边数据和节点布局信息将对应节点之间的边渲染到页面上，生成可视化的桑基图，由此，在生成桑基图的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于层级信息来绘制可视化桑基图。

本公开实施例的第三方面提出了一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现本公开实施例中的桑基图的生成方法。

本公开实施例的第四方面提出了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行所述本公开实施例中的桑基图的生成方法。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种桑基图的生成方法的流程图。

图2是根据另一示例性实施例示出的一种桑基图的生成方法的流程图。

图3是根据另一示例性实施例示出的一种桑基图的生成方法的流程图。

图4是根据一示例性实施例示出的一种桑基图的生成装置的框图。

图5是根据一示例性实施例示出的另一种桑基图的生成装置的框图。

图6是根据一示例性实施例示出的一种用于桑基图的生成装置的电子设备框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

下面参考附图描述本公开实施例的一种桑基图的生成方法、装置、电子设备和存储介质。

图1是根据一示例性实施例示出的一种桑基图的生成方法的流程图，如图1所示，该桑基图的生成方法可以包括：

在步骤S11中，获取页面中待可视化数据，其中，待可视化数据包括多个节点各自对应的节点数据以及边数据。

其中，需要说明的是，本实施例的桑基图的生成方法是执行主体为桑基图的生成装置，该桑基图的生成装置可以由软件和/或硬件的方式实现，该实施例中的桑基图的生成装置可以配置电子设备中，本实施例中的电子设备可以包括服务器等，该实施例对电子设备不作具体限定。

在步骤S12中，根据边数据，确定多个节点的层级信息。

在一些实施例中，根据边数据，确定多个节点的层级信息的一种实施方式为：根据边数据，确定多个节点之间的关联关系，从而根据关联关系，确定多个节点的层级信息。

在一些实施例中，上述边数据用于表示节点之间的连接关系，具体地，可根据节点之间的连接关系，确定上述多个节点的层级关系。

作为一种示例性的实施方式，可通过边的数据结构来表示节点之间的连接关系，也就是说，在一些实施例中，可根据边的数据结构去确定多个节点的层级信息。

作为一种示例，上述边的数据结构可以包括边的起始节点以及结束节点。

例如，可以通过依据节点的边传入的数据结构为：

基于上述边的数据结构，可确定上述三个节点a、b和c的层级信息为：a为根节点，bc为二级节点。

又例如，可以通过依据节点的边传入的数据结构为：

基于上述边的数据结构，可确定上述三个节点a、b和c的层级信息为：a为根节点，b为二级节点，c为三级节点。

在步骤S13中，根据节点数据和层级信息，确定多个节点各自在页面上的节点布局信息。

在步骤S14中，根据层级信息，基于节点布局信息将对应节点渲染到页面上。

具体地，可根据各节点的层级信息，基于对应节点的节点布局信息逐层渲染到页面上，以实现将节点逐层渲染到页面上。

在一些实施例中，根据上述层级信息以及节点布局信息，通过原生绘制(ScalableVector Graphics,SVG)的方式将对应节点渲染到页面上，原生绘制方法如下：

其中，SVG是可缩放矢量图形，是一种用于描述二维的矢量图形，基于XML的标记语言。

节点的绘制：

遍历节点布局信息拿到坐标和宽高，首先通过rect元素绘制外层矩形，同时内置foreignObject标签，支持通过HTML模板进行节点样式自定义。

其中，浏览器svg的技术直接可以绘制：标签，从而通过rect元素绘制外层矩形。

其中，foreignObject标签和rect标签都是svg提供的标签，可以相互嵌套使用，例如：

在一些实施例中，foreignObject中的区域可以写html标签和css样式，基于此来自定义节点的样式，如果单纯用只能做简单的形状和交互，无法实现复杂的自定义的，比如节点放个视频，里面写个动画效果等。

边的绘制：

节点的绘制完后，通过上下游节点的数据值，开始画具有数据分配比例的边，只需要通过计算出转化比例，进行坐标计算，绘制三次贝塞尔曲线即可，转化比例的计算方式为：

转化比例＝下游节点/上游节点的值

其中，贝塞尔曲线是基于一种规则，绘制出来有规律的曲线，在曲线设计中被广泛使用。

其中，上方节点绘制完后，是保存了当前节点的四个点坐标信息，和当前节点的层级信息的，并且保存到了节点这个对象中，那么只需要通过边的数据结构就可以直接找到上下游节点id，进而通过id访问对应节点的value，以得到上下游节点的数据值。

为绘制三次贝塞尔曲线，需清楚的知道节点的布局中流量的比例流向，故就需要计算出转化比例，以节点的数据结构为例，

即意味着节点1中50％的流量流向了节点2，如果要使用节点高度换算对应流量占比这种方式，那么节点1的高度为MaxHeight，节点2的高度就是MaxHeight/2，最后重新计算所有节点的布局(坐标更新)，这样就能清晰的从节点的布局大概清楚流量的比例走向。

Tooltip的绘制：

在节点和边上绑定事件，鼠标进入时候，记录下当前坐标，作为左上角原点，通过HTML定制提示条Tooltip样式即可。

在一些实施例中，Tooltip指的是当计算机鼠标划入一些饼图后会跟随弹出的小白框。

其中，当前坐标是鼠标当前的位置，前提是鼠标已经划入节点中，划出节点便不再记录，tooltip只在hover节点的时候显示，且鼠标移入节点后，鼠标的坐标就作为tooltip的左上角坐标，没有节点/边，没有tooltip。

在一些实施例中，节点/边的区域是有限的，往往节点和边的信息中会带有大量的业务信息需要展示，这时候在节点/边的区域是放不下的，就需要另外一块区域来进行展示，故就需要Tooltip的绘制。

在步骤S15中，根据边数据和节点布局信息将对应节点之间的边渲染到页面上，以生成可视化的桑基图。

在一些实施例中，根据边数据和节点布局信息将对应节点之间的边渲染到页面上，以生成可视化的桑基图的一种可能实现方式为：针对每个节点，根据节点的边数据，获取节点的父节点以及子节点，根据节点布局信息，确定父节点在页面上的第一显示位置、子节点在页面上的第二显示位置和高度，在第一显示位置和第二显示位置之间绘制以子节点的高度为宽度的边。

本公开提出一种桑基图的生成方法，在基于待可视化数据生成桑基图的过程中，根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后根据边数据和节点布局信息将对应节点之间的边渲染到页面上，生成可视化的桑基图，由此，在生成桑基图的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于层级信息来绘制可视化桑基图。

基于上述实施例的基础上，在对桑基图中的节点进行触发的过程中，相关技术中的桑基图中仅对该节点，以及该节点的父节点以及子节点进行高亮显示，然而，在大数据场景下，节点很多的时候，仅显示对三个节点进行高亮显示，不能一眼找到相关上下游所有有关系的节点，从而导致数据分析的效率非常低。为了帮助分析师能直接分析相关上下游的所有关系节点和流量分布，提高分析效率。在基于边数据将对应节点之间的边渲染到页面上，以生成可视化的桑基图之后，该方法还包括：接收对桑基图中的一个目标节点的触发操作，响应于触发操作，对目标节点进行向上游查找和向下游查找，以得到桑基图中与目标节点具有关联关系的所有节点和边，将所找到的所有节点和边的显示样式从第一显示样式调整为第二显示样式。由此，在接收到桑基图目标节点的触发操作时，对目标节点进行上下游查找，以得到目标节点有关联关系的节点和边，并将所有节点和边的显示样式从第一显示样式调整为第二显示样式，从而实现内置全链路的高亮显示功能。

具体的，该生成的桑基图高亮功能为：当点击一个节点的时候，同时进行两个递归方法，进行向上游查找和向下游查找，找出所有有关联的节点和边的标识并保存，根据标识找到节点和边，对样式进行修改，动态高亮节点和边，最终把其余所有节点和边样式进行弱化，达到模拟高亮效果。

作为一种示例性的实施方式，生成桑基图的方法还包括：根据层级信息，基于节点布局信息将对应节点渲染到页面上，可以为：接收对桑基图的最后一层级中第一节点的节点扩展请求，其中，节点扩展请求包括待增加的第二节点的节点数据，根据第一节点的层级信息，确定第二节点的层级信息，根据第二节点的层级信息和节点数据，将第二节点、第一节点与第二节点之间的边渲染到页面上。

在一些实施例中，根据上述第二节点的层级信息和节点数据，将第二节点、第一节点与第二节点之间的边渲染到页面上，方法包括：根据第二节点的层级信息和节点数据，确定第二节点在页面上的节点布局信息，根据第二节点在页面上的节点布局信息，将第二节点渲染到页面上，以得到第二节点，根据第二节点在页面上的节点布局信息，确定第二节点在页面上的高度，根据第二节点在页面上的高度，绘制第一节点与第二节点之间的边。

具体的，该实施例还提供一种扩展支持功能，例如：当需要在横向层级/纵向层级扩展更多节点和边的情况下，只需要改变对应数据源即可，通过数据的变化，重新计算布局，绘制，绑定交互事件即可。

其中，改变数据源的方式可以为：先传入节点/边的数据结构的，比如：

节点：

边：

只有这两条数据源才可以确定去计算对应的布局和图表，同时也只要在代码中改这个数据源，或者后端直接返回变化后的数据源，直接传入库中使用即可产生变化。

在本实施例中，绑定交互事件可以通过JS绑定，例如：

先删除原有元素的时间，api：removeEventListener，在给所有元素重新绑定新事件，api：addEventListener。

因为数据源变化＝》图表结构变化＝》节点可能增加，消失，移位，这时候重新渲染图表并重新绑定上面的点击事件，tooltip鼠标移入事件等，以实现绑定交互事件。

图2是根据另一示例性实施例示出的一种桑基图的生成方法的流程图，如图2所示，该桑基图的生成方法可以包括：

在步骤S21中，获取页面中待可视化数据，其中，待可视化数据包括多个节点各自对应的节点数据以及边数据。

在步骤S22中，根据边数据，确定多个节点的层级信息。

在步骤S23中，根据多个节点各自对应的流量值，从多个节点中确定出流量最大值对应的目标节点。

在一些实施例中，节点数据包括节点当前流量大小，节点的流量分布走向等，在该实施例中，根据节点当前对应的流量值大小，确定出多个节点中流量值最大的目标节点。

在步骤S24中，获取初始化的节点最大高度，并将节点最大高度作为目标节点在页面上的高度。

在一些实施例中，在大数据场景下，数据会发生间隔过大的场景，如果最大节点高度设置过高的情况下，节点和边均无法交互，所以要预设节点的最大高度，以此作为目标节点在页面上的高度，该预设节点的最大高度可以是初始化的节点最大高度，但不仅限于此。

在步骤S25中，根据目标节点在页面上的高度和流量最大值，确定比例尺。

在一些实施例中，根据目标节点在页面上的高度和流量最大值，确定比例尺的一种实施方式为，获取目标节点在页面上的高度与流量最大值的比值，并将比值确定为比例尺。

在一些实施例中，为准确计算比例尺的大小，方式如下：由于节点需要直接显示当前阶段流量大小，一般节点高度就代表的占比比例，所以节点高度需要动态进行计算，如果初始化时候传入节点最大高度MaxHeight，需要在数据初始化阶段遍历计算最大值节点MaxValue，然后通过计算出比例尺，来进行其他节点的高度换算，比例尺计算公示如下：

比例尺(scale)＝节点最大高度(MaxHeight)/最大值节点(MaxValue)

其中，节点高度就意味着这个流量分配比例，例如：桑基图就是代表数据的流量，比如当前流量初始节点为100，那他肯定流向第二层的各个节点，且各个节点的总和也为100。

桑基图指的是可视化中一种特定类型的流程图，分支宽度对应数据流量大小，通常用于各行各业的可视化分析当中。

其中，通过比例尺来进行其他节点的高度换算实施方式可以为：

初始时传入节点的数据结构

MaxValue就是遍历得到的2，如果MaxHeight是100，那么node-1的高度就是100，比例尺为：

scale＝100/2＝50

node-2的高度就是：

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

但光有比例尺是不够的，事实上在大数据场景下，数据会发生“间隔过大”的场景，例如，数据池中可能会以亿为单位，也可能会有个位数为单位，这样在通过比例尺换算后，个位数为单位的节点高度已经远远小于1px，这在浏览器环境上是无法实现的，而且如果最大节点高度设置过高的情况下，节点和边均无法交互，所以要设置最小高度阈值，这样通过损失精度的方式，才能对可视化有友好的分析和交互。

在步骤S26中，对于多个节点中除了目标节点之外的一个节点，根据一个节点的流量值和比例尺，确定出一个节点的高度。

具体的，根据上述比例尺和除了目标节点之外的一个节点的流量值，确定出一个节点的高度。

在步骤S27中，针对每个节点，根据节点的层级信息和节点的高度，确定节点的节点布局信息。

在本公开的一些实施例中，为准确确定节点的节点布局信息，根据节点的层级信息和节点的高度，确定节点的节点布局信息，方法包括：获取为页面预设的初始化信息，其中，初始化信息包括节点宽度以及节点间距，根据节点的层级信息、节点宽度、节点间距和节点的高度，确定节点的顶点坐标信息。

在一些实施例中，根据节点的层级信息、节点宽度、节点间距和节点的高度，确定节点的顶点坐标信息的一种实施方式为，根据节点的层级信息、节点间距，确定节点的左上顶点坐标信息，同时根据节点的层级信息、节点间距和节点宽度，确定节点的右上顶点坐标信息，还根据节点的层级信息、节点间距和节点的高度，确定节点的左下顶点坐标信息，并根据节点的层级信息、节点宽度、节点间距和节点的高度，确定节点的右下顶点坐标信息。

在另一些实施例中，为准确确定节点的顶点坐标信息，可根据初始化时候传入节点的宽，节点之间的上下间距、左右间距等配置，进行坐标位置计算，初始位置从画布左上角起，根据间距和宽度依次算出每个节点的坐标，同时记录当前层级，最终将所有节点的二维坐标存储到节点对象中。具体的，为根据间距和宽度依次精确的算出每个节点的坐标，作为一种示例性实施方式为：初始的时候会有一些配置，有节点的宽度w，还有节点间距p，内部设置一个节点的默认高度h，从左上角原点开始(0，0)，再根据传入的数据结构计算出当前节点的层级(第n行第n列)，他的左上角坐标就是(np，np)，右上角(np+nw，np)，左下角(np，np+nh)，右下角(np+nw，np+nh)，依次类推。

其中，如果配置了节点高度需要根据流量占比来进行变化，那就要先对数据结构进行遍历算出每个层级每个节点的高度，在计算每个节点的坐标时候，替换上面的h。

在步骤S28中，根据层级信息，基于节点布局信息将对应节点渲染到页面上。

在步骤S29中，根据边数据和节点布局信息将对应节点之间的边渲染到页面上，以生成可视化的桑基图。

本公开提出一种桑基图的生成方法，在基于待可视化数据生成桑基图的过程中，根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后根据边数据和节点布局信息将对应节点之间的边渲染到页面上，生成可视化的桑基图，由此，在生成桑基图的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于层级信息来绘制可视化桑基图。

图3是根据另一示例性实施例示出的一种桑基图的生成方法的流程图，如图3所示，该桑基图的生成方法可以包括：

步骤S31，获取页面中待可视化数据，其中，待可视化数据包括多个节点各自对应的节点数据以及边数据。

步骤S32，根据边数据，确定多个节点的层级信息。

步骤S33，根据节点数据和层级信息，确定多个节点各自在页面上的节点布局信息。

步骤S34，根据层级信息，基于节点布局信息将对应节点渲染到页面上。

其中，需要说明的是，关于步骤S31至步骤S34的具体实现方式，可参见上述实施例中的相关描述。

步骤S35，针对每个节点，根据节点的边数据，获取节点的父节点以及子节点。

步骤S36，根据父节点的节点布局信息，确定父节点在页面上的第一显示位置。

步骤S37，根据子节点的节点布局信息，确定子节点在页面上的第二显示位置和高度。

步骤S38，在第一显示位置和第二显示位置之间绘制以子节点的高度为宽度的边以生成可视化的桑基图。

本公开提出一种桑基图的生成方法，在基于待可视化数据生成桑基图的过程中，根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后针对每个节点，获取节点的父节点以及子节点，并根据父节点以及子节点的布局信息，以确定父节点以及子节点页面上的显示位置和高度，从而生成可视化的桑基图，由此，在生成桑基图的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于边数据和节点布局信息来绘制可视化桑基图。

图4是根据一示例性实施例示出的一种桑基图的生成装置140框图。参照图4，该装置包括获取模块141，第一确定模块142，第二确定模块143，第一渲染模块144和生成模块145。

获取模块141，被配置为获取页面中待可视化数据，其中，可视化数据包括多个节点各自对应的节点数据以及边数据。

第一确定模块142，被配置为根据边数据，确定多个节点的层级信息。

第二确定模块143，被配置为根据节点数据和层级信息，确定多个节点各自在页面上的节点布局信息。

第一渲染模块144，被配置为根据层级信息，基于节点布局信息将对应节点渲染到页面上。

生成模块145，被配置为根据边数据和节点布局信息将对应节点之间的边渲染到页面上，以生成可视化的桑基图。

本公开提出一种桑基图的生成装置，在基于待可视化数据生成桑基图的过程中，根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后根据边数据和节点布局信息将对应节点之间的边渲染到页面上，生成可视化的桑基图，由此，在生成桑基图的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于层级信息来绘制可视化桑基图。

在本公开的一个实施例中，如图5所示，第二确定模块143，包括：

第一确定单元1431，被配置为根据多个节点各自对应的流量值，从多个节点中确定出流量最大值对应的目标节点。

获取单元1432，被配置为获取初始化的节点最大高度，并将节点最大高度作为目标节点在页面上的高度。

第二确定单元1433，被配置为根据目标节点在页面上的高度和流量最大值，确定比例尺。

第三确定单元1434，被配置为对于多个节点中除了目标节点之外的一个节点，根据一个节点的流量值和比例尺，确定出一个节点的高度。

第四确定单元1435，被配置为针对每个节点，根据节点的层级信息和节点的高度，确定节点的节点布局信息。

在本公开的一个实施例中，如图5所示，第四确定单元1435，具体被配置为：

获取为页面预设的初始化信息，其中，初始化信息包括节点宽度以及节点间距。

根据节点的层级信息、节点宽度、节点间距和节点的高度，确定节点的顶点坐标信息。

根据节点的顶点坐标信息，确定节点的节点布局信息。

在本公开的一个实施例中，如图5所示，第二确定单元1433，具体被配置为：

获取目标节点在页面上的高度与流量最大值的比值，并将比值确定为比例尺。

在本公开的一个实施例中，如图5所示，根据节点的层级信息、节点宽度、节点间距和节点的高度，确定节点的顶点坐标信息，第二确定模块143，具体被配置为：

根据节点的层级信息、节点间距，确定节点的左上顶点坐标信息。

根据节点的层级信息、节点间距和节点宽度，确定节点的右上顶点坐标信息。

根据节点的层级信息、节点间距和节点的高度，确定节点的左下顶点坐标信息。

根据节点的层级信息、节点宽度、节点间距和节点的高度，确定节点的右下顶点坐标信息。

在本公开的一个实施例中，如图5所示，生成模块145，具体被配置为：

针对每个节点，根据节点的边数据，获取节点的父节点以及子节点。

根据父节点的节点布局信息，确定父节点在页面上的第一显示位置。

根据子节点的节点布局信息，确定子节点在页面上的第二显示位置和高度。

在第一显示位置和第二显示位置之间绘制以子节点的高度为宽度的边以生成可视化的桑基图。

在本公开的一个实施例中，如图5所示，该装置还包括：

第一接收模块146，被配置为接收对桑基图中的一个目标节点的触发操作。

响应模块147，被配置为响应于触发操作，对目标节点进行向上游查找和向下游查找，以得到桑基图中与目标节点具有关联关系的所有节点和边。

调整模块148，被配置为将所找到的所有节点和边的显示样式从第一显示样式调整为第二显示样式，其中，第一显示样式和第二显示样式的至少一个显示参数不同。

在本公开的一个实施例中，如图5所示，该装置还包括：

第二接收模块149，被配置为接收对桑基图的最后一层级中第一节点的节点扩展请求，其中，节点扩展请求包括待增加的第二节点的节点数据。

第三确定模块1410，被配置为根据第一节点的层级信息，确定第二节点的层级信息。

第二渲染模块1411，被配置为根据第一节点的节点布局信息、第二节点的。层级信息和第二节点的节点数据，将第二节点、第一节点与第二节点之间的边渲染到页面上。

在本公开的一个实施例中，如图5所示，第二渲染模块1411，具体被配置为：

根据第二节点的层级信息和第二节点的节点数据，确定第二节点在页面上的节点布局信息。

根据第二节点在页面上的节点布局信息，确定第二节点在页面上的高度和第三显示位置。

根据第一节点的节点布局信息，确定第一节点在页面上的第四显示位置。

根据第二节点在页面上的节点布局信息，将第二节点渲染到页面上，以得到第二节点。

在第三显示位置和第四显示位置之间以第二节点页面上的高度为宽度，绘制第一节点与第二节点之间的边。

在本公开的一个实施例中，如图5所示，第一确定模块142，具体被配置：

根据边数据，确定多个节点之间的关联关系。

根据关联关系，确定多个节点的层级信息。

本公开提出一种桑基图的生成装置，在基于待可视化数据生成桑基图的过程中，根据待可视化数据中边数据，确定多个节点的层级信息，并根据待可视化数据中节点数据和层级信息，确定多个节点各自在页面上的节点布局信息，并根据层级信息，将基于节点布局信息对应节点渲染到页面上，最后根据边数据和节点布局信息将对应节点之间的边渲染到页面上，生成可视化的桑基图，由此，在生成桑基图的过程中，基于待可视化数据中边数据，确定多个节点的层级信息，并基于层级信息，将对应节点的节点布局信息以及节点之间上的边渲染到页面上，以生成可视化桑基图，实现了基于层级信息来绘制可视化桑基图。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

为了实现上述实施例，本公开实施例还提出了一种电子设备。其中，电子设备包括：处理器；用于存储处理器可执行指令的存储器；其中，处理器被配置为执行指令，以实现如前的桑基图的生成方法。

作为一种示例，图6是根据一示例性实施例示出的一种用于桑基图的生成的电子设备160的框图，如图6所示，上述电子设备160，还可以包括：

存储器161及处理器162，连接不同组件(包括存储器161和处理器162)的总线163，存储器161存储有计算机程序，当处理器162执行程序时实现本公开实施例的桑基图的生成方法。

总线163表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备160典型地包括多种电子设备可读介质。这些介质可以是任何能够被电子设备160访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器161还可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)164和/或高速缓存存储器165。电子设备160可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统166可以用于读写不可移动的、非易失性磁介质(图6未显示，通常称为“硬盘驱动器”)。尽管图6中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线163相连。存储器161可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本公开各实施例的功能。

具有一组(至少一个)程序模块167的程序/实用工具168，可以存储在例如存储器161中，这样的程序模块167包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块167通常执行本公开所描述的实施例中的功能和/或方法。

电子设备160也可以与一个或多个外部设备169(例如键盘、指向设备、显示器1691等)通信，还可与一个或者多个使得用户能与该电子设备160交互的设备通信，和/或与使得该电子设备160能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1692进行。并且，电子设备160还可以通过网络适配器1693与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1693通过总线163与电子设备160的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备160使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理器160通过运行存储在存储器161中的程序，从而执行各种功能应用以及数据处理。

在一个实施例中，该处理器162可以被配置为执行本公开第一方面实施例的桑基图的生成方法。

在另一个实施例中，该处理器162可以被配置为执行本公开第二方面实施例的桑基图的生成方法。

其中，需要说明的是，前述对桑基图的生成方法实施例的解释说明，也适用于本实施例的桑基图的生成装置，该实施例对此不作具体限定。

在示例性实施例中，还提供了一种包括指令的存储介质，例如包括指令的存储器，上述指令可由装置160的处理器162执行以完成上述方法。可选地，存储介质可以是非临时性计算机可读存储介质，例如，非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

在示例性实施例中，还提供了一种计算机程序产品，该计算机程序由电子设备的处理器执行时，使得电子设备能够执行如前第一方面桑基图的生成方法，或者，第二方面实施例的桑基图的生成装置。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本公开的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本公开的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现定制逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本公开的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本公开的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得程序，然后将其存储在计算机存储器中。

应当理解，本公开的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。如，如果用硬件来实现和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本公开各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由上面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。