一种基于HTML5的节点关系图显示方法及系统技术方案

本发明专利技术提出了一种基于HTML5的节点关系图显示方法及系统,该方法包括如下步骤:用户输入或网站服务器后台返回节点关系图的图形数据,该图形数据为特定的json格式；数据输入模块获取相应的json图形数据并临时存储；利用HTML5的新特性创建图形绘制模块并创建初始的空白画布；利用JavaScript脚本程序解析器解析json图形数据；图形绘制模块根据解析后的图形数据设置节点的初始位置并绘制节点；根据绘制好的节点图以及相应的图形数据,图形绘制模块绘制出对应的节点连接线；图形元素事件处理模块根据图形数据设置图形元素的鼠标事件；图形输出模块输出图形到网页上并显示出节点关系图给用户.本发明专利技术利用HTML5的canvas功能和html页面支持的图形各元素的鼠标事件,通过特定格式的图形数据,高效、清晰地将节点关系图显示在网页上。

【技术实现步骤摘要】

本专利技术涉及在线教育
,具体涉及一种基于HTML5的节点关系图的显示方法及系统.
技术介绍
随着互联网的迅速发展以及海量数据的快速出现,为海量数据提供一种高效、直观的可视化方法变得越来越重要.对于在线教育领域,以提高学习效率和学习路径导航为目的的知识地图如何绘制成为一个亟待解决的问题.目前,很多平台都提供了基于web的图形数据可视化技术.如Adobe公司的flash,Mcrosoft的Sliverlight都提供了基于web的图形绘制技术,但他们都需要客户端浏览器安装相应插件才能正常显示.另外,sun公司的JavaApplet平台也提供了基于web的图形绘制技术,但同样要求用户电脑上安装了JRE才能正常运行.由于需要用户客户端安装额外的插件才能正常显示绘制的图形,因此基于上述这些平台的图形数据可视化技术发展较为缓慢.w3c组织推出的新一代HTML5标准的宗旨在于消除或降低脚本的复杂性，提供之前版本需要插件才能实现的功能,其中用于绘画的Canvas元素为网页绘图及图像处理带来了很大的便利.目前主流的浏览器如IE9,Firefox,chrome,Safari等都完成了对HTML5标准的支持.因此,基于新一代HTML5标准、Ajax和WebService技术使得不使用任何插件便能在客户端的浏览器上绘制图形成为可能.
技术实现思路
本专利技术克服了需用客户端安装浏览器插件才能实现基于web的图形绘制的缺陷,提供了一种基于HTML5的节点关系图的显示方法及系统,能够高效、清晰地将节点关系图显示在网页上.同时,由于使用了开源JavaScript脚本库arbor.js来对节点进行布局,有效地避免了因为节点连接线的之间交叉过多而使图形杂乱难于分析.另外,本专利技术使用鼠标事件处理模块对图形元素进行处理,节点关系图中的各种不同元素均能够响应鼠标的不同事件,这与传统整个图形响应鼠标事件大不相同.为了实现本专利技术的上述目的,本专利技术提供了一种基于HMTL5的节点关系图的显示方法,其包括如下步骤:S1:由用户输入或web服务器后台传入json格式的图形数据S2:使用解析器解析图形数据并临时存储S3:利用图形绘制模块创建空白画布S4:根据解析过的图形数据使用图形绘制模块绘制相应的节点和节点连线S5:利用图形元素事件处理模块为图形元素设置相应的鼠标事件响应程序S6:将绘制好的图形输出并显示在html页面上本专利技术基于HTML5的节点关系图的显示方法利用HTML5绘制图形的新特性和开源JavaScript库arbor.js,提出了一种简单有效的HTML5+JavaScript+json数据解析技术可以快速并稳定的在网页上显示节点关系图.为了实现本专利技术的上述目的,根据本专利技术的第一个方面,本专利技术提供了一种节点关系图显示系统,其包括数据输入模块,解析器,图形绘制模块,图形元素鼠标事件处理模块以及图形输出模块；所述数据输入模块用于获取用于显示节点关系图的图形数据,格式为json格式,可以由用户直接输入并由JavaScript脚本转换为json,也可以由网站服务器后台直接返回json格式的图形数据；所述解析器用于把数据输入模块得到的json格式图形数据解析为JavaScript脚本可以识别的节点以及节点之间的联系；所述图形绘制模块根据解析过的图形数据绘制和arbor.js库绘制出相应的节点以及节点连接线；所述图形元素鼠标事件处理模块根据已经绘制出的节点和节点连接线设置相应的图形元素鼠标事件相应程序；图形输出模块用于将绘制完毕的节点关系图输出到html页面上.本专利技术的有益效果主要表现在:1)本专利技术使用了开源JavaScript脚本库arbor.js对图形中的节点进行布局,该布局算法可以根据节点的密度动态调节节点的位置以规避节点连接线之间的交叉,使节点关系图更有效地表现出节点之间的关系.当节点较多时,不至于图形的节点连接线交叉过多而杂乱.2)本专利技术通过鼠标事件处理模块对节点关系图中的各种图形元素(包括节点,节点连接线以及节点连接线上的标签)设置不同的鼠标事件响应程序,而传统web页面上的图形只能在整个图形范围内响应鼠标事件.3)本专利技术使用HTML5的新特性<canvas>标签来绘制节点关系图,不需要客户机浏览器安装任何插件就可以正常显示.附图说明图1是本专利技术一种基于HTML5的节点关系图显示方法及系统的一种实施例的结构示意图；图2是本专利技术一种基于HTML5的节点关系图显示方法及系统的一种实施例的流程图.具体实施方式下面对本专利技术作进一步阐述.下面将会详细阐述本专利技术的实施过程,所述示例将会在图示中示出,其中始终相同的元件或模块名称标示具有相同功能的元件.下面以附图描述的实施过程只是示例性的,仅用于解释和阐述本专利技术,不应理解为对本专利技术的限制.如图1所示,本专利技术提供了一种节点关系图显示系统,该系统包括数据输入模块,解析器,图形绘制模块,输出模块,图形元素事件处理模块和图形输出模块.其中,数据输入模块用于接收由用户输入或者web服务器后台返回的图形数据,数据格式为json数据.解析器用于把数据输入模块得到的json格式图形数据解析为JavaScript脚本可以识别的节点以及节点之间的联系；所述图形绘制模块根据解析过的图形数据绘制和arbor.js库绘制出相应的节点以及节点连接线；所述图形元素鼠标事件处理模块根据已经绘制出的节点和节点连接线设置相应的图形元素鼠标事件相应程序；图形输出模块用于将绘制完毕的节点关系图输出到html页面上.本专利技术还提供了一种基于HTML5的节点关系图的显示方法,其包括如下步骤:第一步:由用户输入或web服务器后台传入json格式的图形数据.在本实施方式中,若采用用户输入的方式来获取节点关系图的图形数据,则在前端html页面上提供相应的输入控件,包括文本框<text>和添加点与边的按钮<input>.每次用户提交一次添加节点或边的操作时,则图形绘制模块根据arbor.js库的节点布局算法自动改变现有节点的位置,并绘制出新的节点或节点连接线.若采用后一种数据输入方式,JavaScript使用异步请求技术AJAX发送获取图形数据的请求,web服务器后台的动态页面(php,py,asp等脚本语言)通过查询数据库得到请求的图形数据,将查询结果(包含了节点关系图的节点以及节点关系等数据)生成相应的json格式数据返回给前台的JavaScript脚本程序.以下为用于描述节点关系图的json数据示例:该json数据表示两个节点”节点1”和”节点2”,其中有一条连接线由”节点1”指向”节点2”.对于”data”键的内容可以根据图形的需要自定义添加,本例添加了对于节点的描述以及详细描述,同时添加了相关链接,以便实现页面跳转.第二步:使用解析器解析图形数据并临时存储.在本实施方式中,所述解析器主要由JavaScript脚本程序构成.由于JavaScript程序能够使用内建的eval()函数来解析JSON格式的数据，并用JSON数据来生成原生的JavaScript对象,因此使用json格式的图形数据给图形绘制带来了极大的便利.所述解析器通过第一次遍历JSON格式的图形数据,得到所有节点的相关信息,所述节点相关信息包本文档来自技高网...

【技术保护点】
一种基于HTML5的节点关系图的显示方法,其特征在于,包括如下步骤：S1：由用户输入或web服务器后台返回特定json格式的数据；S2：JavaScript脚本对该格式的json数据进行解析,得到相应的节点和节点关系；S3：图形绘制模块绘制创建一个空白画布；S4：图形绘制模块在空白画布上绘制节点和节点连接线；S5：图形元素事件处理模块设置相应的鼠标事件相应程序；S6：将图形输出到web页面上显示。

【技术特征摘要】
1.一种基于HTML5的节点关系图的显示方法,其特征在于,包括如下步骤：S1：由用户输入或web服务器后台返回特定json格式的数据；S2：JavaScript脚本对该格式的json数据进行解析,得到相应的节点和节点关系；S3：图形绘制模块绘制创建一个空白画布；S4：图形绘制模块在空白画布上绘制节点和节点连接线；S5：图形元素事件处理模块设置相应的鼠标事件相应程序；S6：将图形输出到web页面上显示。2.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特征在于,所述以用户输入的方式传入节点关系图的图形数据,使用JavaScript脚本程序处理成json格式的数据并临时存储。3.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特征在于,所述以web服务器后台返回节点关系图的图形数据,使用异步请求技术ajax异步请求web服务器返回json格式数据。4.如权利要求1所述的基于HTML5的节点关系图的显示方法,其特...

【专利技术属性】
技术研发人员：曹晟，蒋长红，毕丙伟，张刚林，孙博宇，常知常，李富祥，
申请(专利权)人：电子科技大学，
类型：发明
国别省市：四川;51