[发明专利]JSON树的视图化方法、装置、设备及可读存储介质

说明书

本发明公开了一种JSON树的视图化方法，包括：获取树型结构的JSON数据；遍历JSON数据中的所有数据对象，并确定不同数据对象之间的关联关系；根据不同数据对象之间的关联关系确定视图节点的延伸方向，并按照延伸方向和不同数据对象之间的关联关系将所有数据对象进行流式布局；利用SVG技术设置每个数据对象的位置坐标值并连接，得到JSON数据的可视化图形，从而实现了JSON树的视图化。JSON数据的可视化图形能够全面展示JSON树的结构，即展示JSON树中的不同数据对象之间的关联关系，也便于用户对JSON树进行全局管理。本发明公开的一种JSON树的视图化装置、设备及可读存储介质，也同样具有上述技术效果。

技术领域

本发明涉及信息技术领域，更具体地说，涉及一种JSON树的视图化方法、装置、设备及可读存储介质。

背景技术

目前，在前端开发领域内，一般会通过JavaScript将树型结构的JSON数据转换为联级选择组件，基于联级选择组件用户可以准确定位。联级选择组件示意图请参考图9。

联级选择组件需要用户逐步选择才能展示每级包含的对象，因此联级选择组件无法展示JSON树中的不同数据对象之间的关联关系，也不利于用户对JSON树进行全局管理。其中，JSON树即为树型结构的JSON数据。

因此，如何使树型结构的JSON数据视图化，是本领域技术人员需要解决的问题。

发明内容

本发明的目的在于提供一种JSON树的视图化方法、装置、设备及可读存储介质，以实现树型结构的JSON数据视图化。

为实现上述目的，本发明实施例提供了如下技术方案：

一种JSON树的视图化方法，包括：

获取树型结构的JSON数据；

遍历所述JSON数据中的所有数据对象，并确定不同数据对象之间的关联关系；

根据所述不同数据对象之间的关联关系确定视图节点的延伸方向，并按照所述延伸方向和所述不同数据对象之间的关联关系将所有数据对象进行流式布局；

利用SVG技术设置每个数据对象的位置坐标值并连接，得到所述JSON数据的可视化图形。

其中，所述得到所述JSON数据的可视化图形之后，还包括：

利用CSS工具将所述可视化图形进行预设角度的旋转，得到目标图形。

其中，所述利用CSS工具将所述可视化图形进行预设角度的旋转，得到目标图形，包括：

利用CSS工具将所述可视化图形顺时针旋转180度，并使旋转后的可视化图形中的各个节点进行旋转，得到逆文档流方向的目标图形。

其中，所述利用SVG技术设置每个数据对象的位置坐标值并连接，得到所述JSON数据的可视化图形，包括：

在预设的图网容器元素上创建SVG容器元素，并动态设置SVG容器元素的尺寸，使SVG容器元素与图网容器元素在HTML文档流中重合；

利用SVG技术创建直线、折线以及基本图形，并设置每个数据对象的位置坐标值；

按照每个数据对象的属性信息连接不同数据对象的位置坐标值，得到所述JSON数据的可视化图形。

其中，所述得到所述JSON数据的可视化图形之后，还包括：

按照不同的延伸方向调整所述可视化图形，所述延伸方向至少包括：由上至下，由下至上，由左及右，由右及左。

其中，所述得到所述JSON数据的可视化图形之后，还包括：

将所述可视化图形转换为3D视图。