CN109871206A - Json树的视图化方法、装置、设备及可读存储介质 - Google Patents

Abstract

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

Description

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视图。

一种JSON树的视图化装置，包括：

获取模块，用于获取树型结构的JSON数据；

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

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

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

其中，还包括：

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

一种JSON树的视图化设备，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现上述任意一项所述的JSON树的视图化方法的步骤。

一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的JSON树的视图化方法的步骤。

通过以上方案可知，本发明实施例提供的一种JSON树的视图化方法，包括：获取树型结构的JSON数据；遍历所述JSON数据中的所有数据对象，并确定不同数据对象之间的关联关系；根据所述不同数据对象之间的关联关系确定视图节点的延伸方向，并按照所述延伸方向和所述不同数据对象之间的关联关系将所有数据对象进行流式布局；利用SVG技术设置每个数据对象的位置坐标值并连接，得到所述JSON数据的可视化图形。

可见，所述方法能够按照延伸方向和不同数据对象之间的关联关系对树型结构的JSON数据中的所有数据对象进行流式布局，并利用SVG技术得到了JSON数据的可视化图形，从而实现了JSON树的视图化。JSON数据的可视化图形能够全面展示JSON树的结构，即展示JSON树中的不同数据对象之间的关联关系，也便于用户对JSON树进行全局管理。

相应地，本发明实施例提供的一种JSON树的视图化装置、设备及可读存储介质，也同样具有上述技术效果。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例公开的一种JSON树的视图化方法流程图；

图2为本发明实施例公开的一种JSON树的视图化装置示意图；

图3为本发明实施例公开的一种JSON树的视图化设备示意图；

图4为本发明实施例公开的一种由上至下延伸方向的可视化图形；

图5为本发明实施例公开的一种由下至上延伸方向的可视化图形；

图6为本发明实施例公开的一种由左及右延伸方向的可视化图形；

图7为本发明实施例公开的一种由右及左延伸方向的可视化图形；

图8为本发明实施例公开的一种3D视图的可视化图形；

图9为本发明实施例公开的一种联级选择组件示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例公开了一种JSON树的视图化方法、装置、设备及可读存储介质，以实现树型结构的JSON数据视图化。

参见图1，本发明实施例提供的一种JSON树的视图化方法，包括：

S101、获取树型结构的JSON数据；

需要说明的是，获取树型结构的JSON数据的方式可以为：通过软件接口从数据库中获取，通过硬件接口从存储介质中获取，或接收数据发送端通过网络线路发送的数据等。

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

其中，遍历JSON数据中的所有数据对象时可采用深度优先遍历算法或广度优先遍历算法。不同数据对象之间的关联关系一般指父节点和子节点之间的父子关系。

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

具体的，流式布局指主要的划分区域的尺寸使用百分数，这种布局方式可以应对不同尺寸的显示屏幕。也就是说，流式布局不再使用像素，而是使用百分百进行设置，其可以自适应屏幕的分辨率，根据浏览器窗口尺寸自由伸缩。当浏览器窗口变大，元素的尺寸会变宽，当浏览器窗口变小，元素的尺寸也会跟着变窄。页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。

优选地，所述按照所述延伸方向和所述不同数据对象之间的关联关系将所有数据对象进行流式布局，包括：按照所述延伸方向和所述不同数据对象之间的关联关系将所有数据对象进行CSS流式布局。

CSS(Cascading Style Sheets)即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS能够对网页中元素位置的排版进行像素级精确控制，拥有对网页对象和模型样式编辑的能力。CSS流式布局即利用CSS语言进行流式布局。

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

SVG(Scalable Vector Graphics)是由W3C定义的一种基于XML的用来描述二维矢量图形和矢量/点阵混合图形的标识语言，是一种全新的矢量图形规范。它可以描述矢量图形、图像及文字等图形对象，其具有丰富的表现效果、良好的可重用性、准确的颜色描述及跨平台的能力。因此利用SVG技术可以

可见，本实施例提供了一种JSON树的视图化方法，所述方法能够按照延伸方向和不同数据对象之间的关联关系对树型结构的JSON数据中的所有数据对象进行流式布局，并利用SVG技术得到了JSON数据的可视化图形，从而实现了JSON树的视图化。JSON数据的可视化图形能够全面展示JSON树的结构，即展示JSON树中的不同数据对象之间的关联关系，也便于用户对JSON树进行全局管理。

基于上述实施例，需要说明的是，所述得到所述JSON数据的可视化图形之后，还包括：利用CSS工具将所述可视化图形进行预设角度的旋转，得到目标图形。

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

基于上述实施例，需要说明的是，所述利用SVG技术设置每个数据对象的位置坐标值并连接，得到所述JSON数据的可视化图形，包括：在预设的图网容器元素上创建SVG容器元素，并动态设置SVG容器元素的尺寸，使SVG容器元素与图网容器元素在HTML文档流中重合；利用SVG技术创建直线、折线以及基本图形，并设置每个数据对象的位置坐标值；按照每个数据对象的属性信息连接不同数据对象的位置坐标值，得到所述JSON数据的可视化图形。

其中，可视化图形为HTML格式，HTML格式的可视化图形可以在任意安装有浏览器的设备上运行，能够为JSON树的视图化提供便利。

基于上述实施例，需要说明的是，所述得到所述JSON数据的可视化图形之后，还包括：按照不同的延伸方向调整所述可视化图形，所述延伸方向至少包括：由上至下，由下至上，由左及右，由右及左。

基于上述实施例，需要说明的是，所述得到所述JSON数据的可视化图形之后，还包括：将所述可视化图形转换为3D视图。3D视图可以更清晰地展现JSON树的结构。

本发明实施例公开了另一种JSON树的视图化方法，相对于上一实施例，本实施例对技术方案作了进一步的说明和优化。

本发明实施例提供的一种JSON树的视图化步骤，包括：

1、获取JSON树，并深度遍历整个JSON树；将JSON树中所有属性名转换成父节点，并按照父节点的从属关系遍历父节点下的子节点，直到整个JSON树遍历完成。

2、采用CSS流式布局将所有子节点浮动在父节点之下，让所有DOM节点有序组织排列。

其中，父节点和子节点即JSON树中的数据对象，DOM节点指包含父节点和子节点的数据对象模型。

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

利用SVG技术设置每个数据对象的位置坐标值并连接，得到JSON数据的可视化图形，包括：在预设的图网容器元素上创建SVG容器元素，并动态设置SVG容器元素的尺寸，让SVG容器元素与图网容器元素在HTML文档流中重合；利用SVG可视化技术创建指定的直线、折线以及基本图形，根据起始坐标位置连接不同节点；获取每一个节点的坐标位置，根据节点的属性连接SVG线和基本图形，直至所有节点准确连接完成。其中，基本图形的位置即为节点位置。

在本实施例中，当变换视图节点的延伸方向时，利用CSS浮动特性确定符合文档流的视图节点的延伸方向。当需要改变视图节点的延伸方向时，浮动各个节点，以实现不同延伸方向的变换。

在本实施例中，若需要实现逆文档流方向的图形，则利用CSS3高级特性中的rotate旋转属性，将整个图形顺时针方向旋转180度，再将图形中所有带有text Content的节点以相反的方向旋转180度，以实现逆文档流方向的图形结构。

在本实施例中，若需要优化可视化图形，则通过算法分析得出每个节点的坐标点位置和节点类型，渐而优化得出完美的连接线路和可视化图形。

需要说明的是，本实施例可采用JavaScript脚本语言实现。本实施例基于DOM页面布局、CSS样式渲染和SVG可视化技术实现了JSON树的视图化，可全面展示JSON树的结构特征。

下面对本发明实施例提供的一种JSON树的视图化装置进行介绍，下文描述的一种JSON树的视图化装置与上文描述的一种JSON树的视图化方法可以相互参照。

参见图2，本发明实施例提供的一种JSON树的视图化装置，包括：

获取模块201，用于获取树型结构的JSON数据；

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

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

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

其中，还包括：

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

其中，所述旋转模块具体用于：

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

其中，所述可视化模块包括：

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

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

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

其中，还包括：

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

其中，还包括：

转换模块，用于将所述可视化图形转换为3D视图。

可见，本实施例提供了一种JSON树的视图化装置，包括：获取模块、遍历模块、布局模块以及可视化模块。首先由获取模块获取树型结构的JSON数据；然后遍历模块遍历JSON数据中的所有数据对象，并确定不同数据对象之间的关联关系；进而布局模块根据不同数据对象之间的关联关系确定视图节点的延伸方向，并按照延伸方向和不同数据对象之间的关联关系将所有数据对象进行流式布局；最后可视化模块利用SVG技术设置每个数据对象的位置坐标值并连接，得到JSON数据的可视化图形。如此各个模块之间分工合作，各司其职，从而实现了JSON树的视图化。JSON数据的可视化图形能够全面展示JSON树的结构，即展示JSON树中的不同数据对象之间的关联关系，也便于用户对JSON树进行全局管理。

下面对本发明实施例提供的一种JSON树的视图化设备进行介绍，下文描述的一种JSON树的视图化设备与上文描述的一种JSON树的视图化方法及装置可以相互参照。

参见图3，本发明实施例提供的一种JSON树的视图化设备，包括：

存储器301，用于存储计算机程序；

处理器302，用于执行所述计算机程序时实现上述任意实施例所述的JSON树的视图化方法的步骤。

下面对本发明实施例提供的一种可读存储介质进行介绍，下文描述的一种可读存储介质与上文描述的一种JSON树的视图化方法、装置及设备可以相互参照。

一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任意实施例所述的JSON树的视图化方法的步骤。

基于上述任意实施例，需要说明的是，视图节点的延伸方向包括：由上至下，由下至上，由左及右，由右及左。那么按照不同的延伸方向调整可视化图形后可得到不同的可视化图形。其中，由上至下延伸方向的可视化图形请参见图4；由下至上延伸方向的可视化图形请参见图5；由左及右延伸方向的可视化图形请参见图6；由右及左延伸方向的可视化图形请参见图7；3D视图的可视化图形请参见图8，图8所示的3D视图的延伸方向为：由中心至周围发散，因此本发明中的视图节点的延伸方向还包括：由中心至周围发散。

需要说明的是，图4-图8着重展示不同延伸方向的视图结构，因此图4-图8中的各个节点的文字不是本发明想要保护的内容，故图4-图8中的各个节点的文字并未着重展示，并可按照实际情况调整为任意内容。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种JSON树的视图化方法，其特征在于，包括：

获取树型结构的JSON数据；

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

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

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

2.根据权利要求1所述的JSON树的视图化方法，其特征在于，所述得到所述JSON数据的可视化图形之后，还包括：

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

3.根据权利要求2所述的JSON树的视图化方法，其特征在于，所述利用CSS工具将所述可视化图形进行预设角度的旋转，得到目标图形，包括：

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

4.根据权利要求1所述的JSON树的视图化方法，其特征在于，所述利用SVG技术设置每个数据对象的位置坐标值并连接，得到所述JSON数据的可视化图形，包括：

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

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

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

5.根据权利要求4所述的JSON树的视图化方法，其特征在于，所述得到所述JSON数据的可视化图形之后，还包括：

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

6.根据权利要求1-5任意一项所述的JSON树的视图化方法，其特征在于，所述得到所述JSON数据的可视化图形之后，还包括：

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

7.一种JSON树的视图化装置，其特征在于，包括：

获取模块，用于获取树型结构的JSON数据；

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

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

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

8.根据权利要求7所述的JSON树的视图化装置，其特征在于，还包括：

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

9.一种JSON树的视图化设备，其特征在于，包括：

存储器，用于存储计算机程序；

处理器，用于执行所述计算机程序时实现如权利要求1-6任意一项所述的JSON树的视图化方法的步骤。

10.一种可读存储介质，其特征在于，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1-6任意一项所述的JSON树的视图化方法的步骤。