The present application embodiment discloses a method, a device and an electronic device for realizing the visualization of a data structure. The method includes: processing the relational data structure to get the set of nodes and the set of edges; based on the degree of the node in the set of the nodes, the layout side in the set of the sides is determined, and the layout side is required. The edge of the position of the corresponding graph in the canvas is determined during the layout process; a visual pattern related to the relational data structure is presented to the user based on the nodes in the set of nodes and the side of the layout.
【技术实现步骤摘要】
实现数据结构可视化的方法、装置和电子设备
本申请涉及信息可视化领域,更具体地涉及实现数据结构可视化的方法、装置和电子设备。
技术介绍
目前在通常采用D3.js和可缩放矢量图形(ScalableVectorGraphics,SVG)在前端实现关系型数据结构的图形化展示及渲染。这种实现方式中,首先在后台将关系型数据结构经过一定的业务逻辑处理后,将关系型数据结构转换为节点和边的集合。之后通过异步或同步的方式将数据加载到前端,并通过D3重力图的方式对节点和边的数据进行初始化。然后通过SVG的画布功能和画图功能,将点和边生成相应的图形,渲染并呈现在浏览器端。最后通过D3重力图布局算法(迭代计算),将节点和边的相应图形分布在画布中的合适位置,最终将关系型数据呈现为一张形如网络结构的图形。但是,在大数据场景下,由于数据量很大,采用现有技术的上述方法将会导致关系型数据结构的图形在前端页面布局需要很长的时间甚至无法成功布局的问题,影响关系型数据结构的可视化效率。因此,需求一种实现数据结构可视化的方法,来克服上述技术问题。
技术实现思路
本申请的目的在于提供一种实现数据可视化的方法、装置和电子设备,能够降低关系型数据结构的图形在前端页面布局所需时间,提高关系型数据结构的可视化效率。为解决上述技术问题,本申请实施例是这样实现的:第一方面,提供了一种实现数据结构可视化的方法,包括:对关系型数据结构进行处理得到节点集合和边集合;基于所述节点集合中的节点的出度,确定所述边集合中的待布局边,所述待布局边为需要在布局过程中确定相应的图形在画布中的位置的边;基于所述节点集合中的节点和所述待布局 ...
【技术保护点】
1.一种实现数据结构可视化的方法,包括:对关系型数据结构进行处理得到节点集合和边集合;基于所述节点集合中的节点的出度,确定所述边集合中的待布局边,所述待布局边为需要在布局过程中确定相应的图形在画布中的位置的边;基于所述节点集合中的节点和所述待布局边,向用户呈现所述关系型数据结构相关的可视化图形。
【技术特征摘要】
1.一种实现数据结构可视化的方法,包括:对关系型数据结构进行处理得到节点集合和边集合;基于所述节点集合中的节点的出度,确定所述边集合中的待布局边,所述待布局边为需要在布局过程中确定相应的图形在画布中的位置的边;基于所述节点集合中的节点和所述待布局边,向用户呈现所述关系型数据结构相关的可视化图形。2.根据权利要求1所述的方法,所述基于所述节点集合中的节点的出度,确定所述边集合中的待布局边,包括:对于所述节点集合中相关联的任意两个节点,如果所述两个节点中至少一个节点的出度大于或等于出度阈值,则将所述两个节点中出度较小的节点与其它节点之间的边作为裁剪边集合中的边;将所述边集合中除所述裁剪边集合中的边之外的边确定为所述待布局边。3.根据权利要求1所述的方法,所述基于所述节点集合中的节点的出度,确定所述边集合中的待布局边,包括:对于所述节点集合中相关联的任意两个节点,如果所述两个节点的出度均小于或等于出度阈值,则将所述两个节点之间的边确定为所述待布局边的一部分;以及,对于所述节点集合中相关联的任意两个节点,如果所述两个节点中至少一个节点的出度大于或等于所述出度阈值,则将所述两个节点中出度较大的节点与其它节点之间的边确定为所述待布局边的一部分。4.根据权利要求2所述的方法,所述基于所述节点集合中的节点和所述待布局边,向用户呈现所述关系型数据结构相关的可视化图形,包括:基于所述节点集合中的节点和所述待布局边,生成全局缩略图,所述全局所略图中包括有边界的可伸缩矢量图形SVG画布、布局在所述有边界的SVG画布中的所述节点集合中的节点相应的图形和可移动的选择框,所述可移动的选择框用于用户选择所述节点集合中的节点中的至少一个目标节点;向用户呈现所述全局缩略图。5.根据权利要求4所述的方法,还包括:根据所述节点集合和所述边集合,确定点映射集Map、边Map和图索引,其中,所述点Map用于以键值对的形式存储所述节点集合中的节点中的数据,所述边Map用于以键值对的形式存储所述边集合中的边中的数据,所述图索引用于以键值对的形式存储所述节点集合中的节点的标识、节点的出度、节点的入度、节点的被关联点的标识以及与所述裁剪边集合中的边相关的节点的标识;其中,在基于所述节点集合中的节点的出度,确定所述边集合中的待布局边之前,还包括:根据所述图索引确定所述节点集合中相关联的任意两个节点的出度。6.根据权利要求5所述的方法,所述基于所述节点集合中的节点和所述待布局边,生成全局缩略图,包括:基于所述图索引从所述点Map中获取所述点集合中的节点中的数据;基于所述图索引从所述边Map中获取所述待布局边中的数据;基于所述节点集合中的节点中的数据和所述待布局边中的数据,生成所述全局缩略图。7.根据权利要求6所述的方法,所述基于所述节点集合中的节点中的数据和所述待布局边中的数据,生成所述全局缩略图,包括:基于所述节点集合中的节点中的数据,生成所述节点集合中的节点相应的图形;基于所述待布局边中的数据,生成所述待布局边相应的图形;将所述节点集合中的节点相应的图形和所述待布局边相应的图形布局在所述有边界的SVG画布中的相应位置;基于所述节点集合中的节点相应的图形和所述待布局边相应的图形在所述有边界的SVG画布中的位置,生成所述全局缩略图。8.根据权利要求7所述的方法,在基于所述节点集合中的数据,生成所述节点集合中的节点相应的图形之后,还包括:基于所述节点集合中的节点中的数据,渲染所述节点集合中的节点相应的图形。9.根据权利要求5至8中任一项所述的方法,还包括:基于用户通过所述可移动的选择框选择的至少一个目标节点的标识和所述图索引,确定所述节点集合中的节点中需要在子图中呈现给用户的节点;基于所述至少一个目标节点的标识和所述图...
【专利技术属性】
技术研发人员:王建国,
申请(专利权)人:阿里巴巴集团控股有限公司,
类型:发明
国别省市:开曼群岛,KY
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。