一种基于d3的研讨系统思维导图及其开发方法
【技术领域】
[0001]本发明属于计算机技术领域，特别涉及一种基于D3的研讨系统思维导图及其开发方法。
【背景技术】
[0002]思维导图是一种将发散性思维图形化的软件工具。在研讨思维导图展示上面，国外更多的是放在研讨思维可视化和相关工具开发上面，这些开发的可视化工具可视化效果好，界面流畅且富有美感和动感，用户体验和交互性都比较好，能清楚的记录和分析个人的思维运动方向和联系，但是这些工具并不能展示出群体的思维。而国内在研讨思维导图展示方面有代表性的“电子公共大脑”和“专家研讨系统”，虽然可以容纳多数成员进行协商研讨，随着研讨进行达成共识。但是都是基于C/S(客户机/服务器)结构的模型，需要安装客户端，带来了很多的开发上面的难度且复用性低，界面也比较粗糙，不能直观给参与研讨者带来很好的感官享受。而且C/S模型并不适合大量用户的并发。
【发明内容】
[0003]基于以上问题，本发明利用国外流行的可视化工具D3(—个创建数据可视化图形的JavaScript库)同时结合国内研讨信息思维导图可支持多用户并发思维的特点采用B/S(浏览器/服务器)结构，开发了一个基于D3的研讨系统思维导图。
[0004]为了解决思维导图在研讨系统中层次感不够清晰和人为参与度不够的缺点，本发明采用D3可视化模块和树算法，不会造成节点的局部堆积拥挤，用户通过该可视化组件动态的观察研讨信息结构，清晰地了解研讨信息之间的逻辑关系，并且能够更好的通过视觉来激发思维，挖掘潜力，达到讨论问题的最优状态。
[0005]本发明中的思维导图主要有三个模块协同合作共同完成，先由数据封装模块把数据库的数据封装以后传入数据解析模块中，经过数据解析模块的解析处理以后再交由图形绘制模块来绘制出思维导图。
[0006]为解决上述技术问题，本发明采用如下技术方案实现:
[0007]一种基于D3的研讨系统思维导图，包括依次连接的数据封装模块、数据解析模块、图形绘制模块;数据封装模块获取数据库的数据，之后将数据库的数据封装成JSON格式传入数据解析模块，经过重解析以后传入图形绘制模块，最终完成研讨信息思维导图可视化的过程。
[0008]所述数据封装模块中，采用数据转换框架把从数据库中获取的数据转换成JSON数据。
[0009]所述数据解析模块中，利用JavaScript脚本语言对返回的数据进行重新解析，并把解析以后的数据作为参数传递到图形绘制模块的接口中。
[0010]所述图形绘制模块接收数据解析模块传递过来的信息，利用D3完成研讨信息思维导图的绘制。
[0011]—种基于D3的研讨系统思维导图的开发方法，包括以下步骤:
[0012]步骤一:在项目工程中首先引入D3.js和tree, js两个依赖js的文件；
[0013]步骤二:数据封装模块把由数据库接收到的数据转换成更适合前端的JSON数据；
[0014]采用一个开源数据转换框架Jackson来实现数据的转换，定义一个数据库表数据转换成JSON的转换方法searchTreeeSo Iut1nArgument ()，该方法中通过soIut1nService对象的getTree JsonChart()方法返回需要的JSON类型研讨信息对象，并将其存放在JsonChart类型的对象数组中，再由JSONArray对象转化成String类型进行前后台的数据传输，利用renderText()方法将所返回的String数据封装到HttpServletResponse对象中，通过对该对象的写入操作实现数据对前端的输出传递；
[0015]步骤三:通过数据封装模块把数据库的数据组装完成后，再通过servlet内置对象传递到前端的数据解析模块，数据解析模块通过Javascript脚本语言对返回的数据进行重新的解析，把解析出来的数据作为参数传递给图形绘制模块提供的统一接口中；
[0016]步骤四:图形绘制模块接收到来自数据解析模块的参数数据，调用图形绘制模块中的tree, js组件来完成研讨信息可视化的思维导图绘制，在整个的绘制过程中，采用反转Ajax的推送技术，异步的提交数据请求，不断的更新数据，重画图形，最终来完成研讨信息的思维导图；
[0017]在显示端的jsp或者html页面添加js文件路径的引入并添加几行关键代码，创建tree对象并传入将要显示的数据参数，窗口参数根据页面的窗口大小进行设定，然后用j Query中的$.ajax ()方法向处理层提交申请，该方法通过不断的向控制层提交请求实现反转ajax方式，控制层转发到相应的act1n中进行处理;Act1n调用相关service方法将数据结果进行内置对象的封装，并且用返回函数的形式提交到前端的显示页面进行处理。
[0018]本发明的主要特点:
[0019]1、采用树状结构展示有很强的视觉层次感和空间利用率。
[0020]2、动态的展示了研讨信息结构，使人们可以清晰的了解研讨信息之间的逻辑关系O
[0021]3、在研讨信息系统中支持多人并发思维展示。
[0022]本发明与现有技术相比具有如下优点和有益效果:
[0023]首先，在前面比较成熟的电子公共大脑中采用的是有向直线的形式来表示结点间的不同关系，这种表示方式虽然也是树状层次结构，但是在空间层次感和视觉直观感上面并不能令人满意，反而在层次的展示反面显得比较乏力，并且当节点的数目增多的时候会显得异常的拥挤。本发明在图形绘制模块中采用树算法来实现树状图的开发，这样不会造成节点的局部堆积拥挤，增强了视觉层次感和空间利用率。
[0024]其次，在专家研讨系统中，采用C/S系统模式研讨信息是以目录状的形式展示出来的，相比较电子公共大脑不会造成节点的拥挤，但是在层次感的展示方面显得不够清晰，且不符合人们日常层次结构的视觉习惯。本发明通过基于D3的可视化思维导图模块，动态显示研讨信息，清晰的展示了研讨信息之间的逻辑关系，从而达讨论问题的最好状态。
【附图说明】
[0025]图1是利用D3研讨思维导图模块来展示思维的示意图(现有技术)；
[0026]图2本发明中完整的D3绘制思维导图的流程图；
[0027]图3数据封装模块示意图；
[0028]图4数据解析模块示意图；
[0029]图5图形绘制模块示意图。
【具体实施方式】
[0030]下面结合附图及实施例对本发明作进一步说明。
[0031]—种基于D3的研讨系统思维导图，如图2所示，包括依次连接的数据封装模块、数据解析模块、图形绘制模块;数据封装模块获取数据库的数据，之后将数据库的数据封装成JSON格式传入数据解析模块，经过重解析以后传入图形绘制模块，最终完成研讨信息思维导图可视化的过程。
[0032]在具体实施开发的方面，由于做了代码的封装处理，在系统中引入和使用只需要三个步骤:
[0033]步骤一:在项目工程中首先引入D3.js和tree,js(是提供了非常多的3D显示功能的JavaScript库)两个依赖js的文件。
[0034]步骤二:引入数据封装模块把由数据库接收