一种基于D3的研讨系统思维导图及其开发方法

摘要

本发明提供一种基于D3的研讨系统思维导图及其开发方法；在B/S框架的基础上，在分析了国内外在研讨信息思维导图的展示方面的优缺点的基础上，同时采用当今流行的D3可视化技术，利用从数据库中获取的研讨信息数据动态绘制出研讨信息思维导图。本发明易用性高，采用简单，交互性强，在层次性的展示方面显得清晰，由于采用了树算法，使得思维导图以树形结构展示且在多人思维展示的上面不会显得节点拥挤，同时可以实时动态的显示研讨信息，清晰地了解研讨信息之间的关系，从而使得人们可以达到讨论问题的最好效果。

说明书

技术领域

本发明属于计算机技术领域，特别涉及一种基于D3的研讨系统思维导图及 其开发方法。

背景技术

思维导图是一种将发散性思维图形化的软件工具。在研讨思维导图展示上 面，国外更多的是放在研讨思维可视化和相关工具开发上面，这些开发的可视化 工具可视化效果好，界面流畅且富有美感和动感，用户体验和交互性都比较好， 能清楚的记录和分析个人的思维运动方向和联系，但是这些工具并不能展示出群 体的思维。而国内在研讨思维导图展示方面有代表性的“电子公共大脑”和“专 家研讨系统”，虽然可以容纳多数成员进行协商研讨，随着研讨进行达成共识。 但是都是基于C/S(客户机/服务器)结构的模型，需要安装客户端，带来了很多 的开发上面的难度且复用性低，界面也比较粗糙，不能直观给参与研讨者带来很 好的感官享受。而且C/S模型并不适合大量用户的并发。

发明内容

基于以上问题，本发明利用国外流行的可视化工具D3(一个创建数据可视 化图形的JavaScript库)同时结合国内研讨信息思维导图可支持多用户并发思 维的特点采用B/S(浏览器/服务器)结构，开发了一个基于D3的研讨系统思维 导图。

为了解决思维导图在研讨系统中层次感不够清晰和人为参与度不够的缺点， 本发明采用D3可视化模块和树算法，不会造成节点的局部堆积拥挤，用户通过 该可视化组件动态的观察研讨信息结构，清晰地了解研讨信息之间的逻辑关系， 并且能够更好的通过视觉来激发思维，挖掘潜力，达到讨论问题的最优状态。

本发明中的思维导图主要有三个模块协同合作共同完成，先由数据封装模 块把数据库的数据封装以后传入数据解析模块中，经过数据解析模块的解析处理 以后再交由图形绘制模块来绘制出思维导图。

为解决上述技术问题，本发明采用如下技术方案实现：

一种基于D3的研讨系统思维导图，包括依次连接的数据封装模块、数据 解析模块、图形绘制模块；数据封装模块获取数据库的数据，之后将数据库的数 据封装成JSON格式传入数据解析模块，经过重解析以后传入图形绘制模块，最 终完成研讨信息思维导图可视化的过程。

所述数据封装模块中，采用数据转换框架把从数据库中获取的数据转换成 JSON数据。

所述数据解析模块中，利用JavaScript脚本语言对返回的数据进行重新解析， 并把解析以后的数据作为参数传递到图形绘制模块的接口中。

所述图形绘制模块接收数据解析模块传递过来的信息，利用D3完成研讨信 息思维导图的绘制。

一种基于D3的研讨系统思维导图的开发方法，包括以下步骤：

步骤一：在项目工程中首先引入D3.js和tree.js两个依赖js的文件；

步骤二：数据封装模块把由数据库接收到的数据转换成更适合前端的JSON 数据；

采用一个开源数据转换框架Jackson来实现数据的转换，定义一个数据库表 数据转换成JSON的转换方法searchTreeeSolutionArgument()，该方法中通过 solutionService对象的getTreeJsonChart()方法返回需要的JSON类型研讨信息对 象，并将其存放在JsonChart类型的对象数组中，再由JSONArray对象转化成 String类型进行前后台的数据传输，利用renderText()方法将所返回的String数据 封装到HttpServletResponse对象中，通过对该对象的写入操作实现数据对前端的 输出传递；

步骤三：通过数据封装模块把数据库的数据组装完成后，再通过servlet内置 对象传递到前端的数据解析模块，数据解析模块通过Javascript脚本语言对返回 的数据进行重新的解析，把解析出来的数据作为参数传递给图形绘制模块提供的 统一接口中；

步骤四：图形绘制模块接收到来自数据解析模块的参数数据，调用图形绘制 模块中的tree.js组件来完成研讨信息可视化的思维导图绘制，在整个的绘制过程 中，采用反转Ajax的推送技术，异步的提交数据请求，不断的更新数据，重画 图形，最终来完成研讨信息的思维导图；

在显示端的jsp或者html页面添加js文件路径的引入并添加几行关键代码， 创建tree对象并传入将要显示的数据参数，窗口参数根据页面的窗口大小进行设 定，然后用jQuery中的$.ajax()方法向处理层提交申请，该方法通过不断的向控 制层提交请求实现反转ajax方式，控制层转发到相应的action中进行处理；Action 调用相关service方法将数据结果进行内置对象的封装，并且用返回函数的形式 提交到前端的显示页面进行处理。

本发明的主要特点：

1、采用树状结构展示有很强的视觉层次感和空间利用率。

2、动态的展示了研讨信息结构，使人们可以清晰的了解研讨信息之间的 逻辑关系。

3、在研讨信息系统中支持多人并发思维展示。

本发明与现有技术相比具有如下优点和有益效果：

首先，在前面比较成熟的电子公共大脑中采用的是有向直线的形式来表示结 点间的不同关系，这种表示方式虽然也是树状层次结构，但是在空间层次感和视 觉直观感上面并不能令人满意，反而在层次的展示反面显得比较乏力，并且当节 点的数目增多的时候会显得异常的拥挤。本发明在图形绘制模块中采用树算法来 实现树状图的开发，这样不会造成节点的局部堆积拥挤，增强了视觉层次感和空 间利用率。

其次，在专家研讨系统中，采用C/S系统模式研讨信息是以目录状的形式展 示出来的，相比较电子公共大脑不会造成节点的拥挤，但是在层次感的展示方面 显得不够清晰，且不符合人们日常层次结构的视觉习惯。本发明通过基于D3的 可视化思维导图模块，动态显示研讨信息，清晰的展示了研讨信息之间的逻辑关 系，从而达讨论问题的最好状态。

附图说明

图1是利用D3研讨思维导图模块来展示思维的示意图(现有技术)；

图2本发明中完整的D3绘制思维导图的流程图；

图3数据封装模块示意图；

图4数据解析模块示意图；

图5图形绘制模块示意图。

具体实施方式

下面结合附图及实施例对本发明作进一步说明。

一种基于D3的研讨系统思维导图，如图2所示，包括依次连接的数据封 装模块、数据解析模块、图形绘制模块；数据封装模块获取数据库的数据，之后 将数据库的数据封装成JSON格式传入数据解析模块，经过重解析以后传入图形 绘制模块，最终完成研讨信息思维导图可视化的过程。

在具体实施开发的方面，由于做了代码的封装处理，在系统中引入和使用只 需要三个步骤：

步骤一：在项目工程中首先引入D3.js和tree.js(是提供了非常多的3D显示 功能的JavaScript库)两个依赖js的文件。

步骤二：引入数据封装模块把由数据库接收到的数据转换成更适合前端的 JSON(一种轻量级的数据交换格式，易于机器的解析)数据。在这里采用一个 简单易用的开源数据转换框架Jackson(可以轻松的将Java对象转换成json对象 和xml文档，同样也可以将json、xml转换成Java对象)来实现数据的转换。定 义了一个数据库表数据转换成JSON的转换方法searchTreeeSolutionArgument()， 该方法中通过solutionService对象的getTreeJsonChart()方法返回需要的JSON类 型研讨信息对象，并将其存放在JsonChart类型的对象数组中，再由JSONArray 对象转化成String类型进行前后台的数据传输。renderText()方法是基类action中 定义的一个方法，其作用是将所返回的String数据封装到HttpServletResponse对 象中，通过对该对象的写入操作实现数据对前端的输出传递。如图3所示。

数据转化的关键引入代码：

publicvoidsearchTreeSolutionArgument(){

JsonChart[]jsonChart＝solutionService.getTreeJsonChart(discussionRoom.getId())；

JSONArrayjsonarr＝newJSONArray()；

Jsonarr.add(jsonChart)；

StringjsonString＝jsonarr.toString()；

this.renderText(jsonString.substring(1,jsonString.length()-1))；}

步骤三：引入数据解析模块，通过数据封装模块把数据库的数据组装完成后， 再通过servlet内置对象传递到前端的数据解析模块，数据解析模块通过Javascript 脚本语言对返回的数据进行重新的解析，把解析出来的数据作为参数传递给图形 绘制模块提供的统一接口中。如图4所示。

步骤四：图形绘制模块接收到来自数据解析模块的参数数据，调用图形绘制 模块中的tree.js组件来完成研讨信息可视化的思维导图绘制，在整个的绘制过程 中，采用反转Ajax(Ajax是一种用于创建快速动态网页的技术)的推送技术，异 步的提交数据请求，不断的更新数据，重画图形。最终来完成研讨信息的思维导 图。在前端的jsp或者html页面添加js文件路径的引入并添加几行关键代码， 创建tree对象并传入将要显示的数据参数。窗口参数根据页面的窗口大小进行设 定，然后用jQuery(是JavaScript和查询，即是辅助JavaScript开发的库)中的$.ajax() 方法向处理层提交申请，该方法通过不断的向控制层提交请求实现反转ajax方 式，控制层转发到相应的action(是用户请求和业务逻辑之间的桥梁，每个Action 充当客户的一项业务代理)中进行处理。Action调用相关service方法将数据结果 进行内置对象的封装，并且用返回函数的形式提交到前端的显示页面进行处理。 这里的url就是请求的，dataType为返回函数的类型，success为请求提交成功后， 服务层返回函数，其参数data为返回的数据封装对象。如图5所示。