[发明专利]JSON树的视图化方法、装置、设备及可读存储介质有效
申请号: | 201910194249.3 | 申请日: | 2019-03-14 |
公开(公告)号: | CN109871206B | 公开(公告)日: | 2022-05-03 |
发明(设计)人: | 毛艳飞;范渊;龙文洁;刘博 | 申请(专利权)人: | 杭州安恒信息技术股份有限公司 |
主分类号: | G06F8/34 | 分类号: | G06F8/34;G06F8/30 |
代理公司: | 北京集佳知识产权代理有限公司 11227 | 代理人: | 罗满 |
地址: | 310000 浙江省杭州*** | 国省代码: | 浙江;33 |
权利要求书: | 查看更多 | 说明书: | 查看更多 |
摘要: | |||
搜索关键词: | 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视图。
该专利技术资料仅供研究查看技术是否侵权等信息,商用须获得专利权人授权。该专利全部权利属于杭州安恒信息技术股份有限公司,未经杭州安恒信息技术股份有限公司许可,擅自商用是侵权行为。如果您想购买此专利、获得商业授权和技术合作,请联系【客服】
本文链接:http://www.vipzhuanli.com/pat/books/201910194249.3/2.html,转载请声明来源钻瓜专利网。