基于WEB的群思维导图的设计与实现

詹丹凤， 熊才权， 詹毅帆， 朱建军

(湖北工业大学计算机学院， 湖北 武汉 430068)



基于WEB的群思维导图的设计与实现

詹丹凤， 熊才权， 詹毅帆， 朱建军

(湖北工业大学计算机学院， 湖北 武汉 430068)

设计并实现了基于WEB的群思维导图，给出了系统用例图和系统结构，并对每个功能模块进行了说明，同时对系统中的关键技术做了分析，介绍并分析了可视化技术DataV，最后给出一个实例来说明群思维导图的有效性。

群思维导图；可视化；DataV

为了挖掘人脑潜能，20世纪60年代英国的东尼·博赞(Tony Buzan)提出了思维导图[1]。思维导图是一种用来记录人类发散性思维的图式工具，它能将众多的知识和想法连接起来，并加以分析，从而直观引导人的思维和创新。思维导图可以手工绘制，也可以用计算机软件制作。目前国外已有多款思维导图软件[2]，如TheBrain、MindManager、FreeMind、Inspiration、MindMapper、XMind、MindV、iMind-Map 等[2]。其中MindManager不仅能够记录思维节点，还可以插入图片、超链接、注释、子概念等，在辅助教学方面有广泛应用[3]；Inspiration是一种概念图绘制工具，它用图表显示各个知识要点之间的联系，用大纲组织知识结构，可用于知识记忆和学生学习引导[4]。但这些软件大多是基于单一用户的软件，主要用于记录观点和对知识进行结构化分解。而人类大多创新思想都是由群体通过交流讨论共同产生的。随着计算机网络技术发展，基于WEB的应用日益成熟，网络交流讨论越来越多，如何对网上群体思维进行引导成为思维导图研究的新方向。

群思维导图是一种支持群体研讨的WEB工具软件，它能记录各成员的意见及其关系，并对群体思维进行引导，提高群体研讨的效率。群思维导图软件实现的关键技术是网络通信和思维可视化[5]。本文对群思维导图中的研讨过程可视化技术进行了深入研究，设计开发了一个基于WEB的群思维导图。该系统运用基于MVC的jsp+servlet+jdbc模式开发系统的后台业务处理部分，用JS+ Jquery技术进行前台页面的开发，运用DataV技术实现思维节点的树形可视化。本文设计的群思维导图既可用作一个小组讨论工具，也可以集成到群体研讨支持系统中，有较好的应用价值。

1 系统设计

1.1 系统基本模型

本文所设计的群思维导图建立在扩展IBIS(Issue_based Information System)模型基础之上[6]。基本IBIS模型[7]描述了针对问题(Issue)提出方案(positions)的研讨过程，并给出了方案的理由(argument)，但该模型对方案的论证只有一个层次，即没有描述针对方案的辩论过程。扩展IBIS增加了对“理由(argument)”的辩论过程，最后形成以方案为根节点的研讨树(图1)。图中“理由”统一用“观点”表示。

图1 系统模型

1.2 系统用例图

系统的主要用户是研讨参与者。用户登录后通过控件进行发言，该发言可以是针对问题提出方案，也可以对他人提出的方案或观点进行评价。系统的用例图见图2。

图2 用例图

系统用户主要有五个功能：登录、提出方案、发表观点、回复观点和编辑观点。

1)登陆系统：用户通过输入用户名和密码登陆系统，只有在登陆系统后才能使用系统其他功能。

2)提出方案：用户登陆系统后，可以针对研讨主题提出方案，它是研讨树的根。

3)发表观点：用户可以针对已有方案发表观点，进行发散性思考。

4)回复观点：用户对已有的观点进行回复，可以对其上级观点(称为父节点)进行支持或者反对，形成研讨树。

5)编辑观点：对已发表观点进行修改，即可点击相关按钮或链接进行观点的编辑修改。

1.3 系统结构

系统结构见图3。

图3 系统结构图

系统分为客户端和服务器两个部分：

1)客户端功能包括支持用户登录系统、参与研讨、提出新方案，添加针对方案的观点、回复观点、编辑观点内容，查看思维导图等；

2)服务器功能有接收客户端连接请求、储存和读取数据得出最终结果等。

客户端作为思维导图系统的主要交互端口，应具有良好的图形界面，一定的可操作性和稳定性、实用性。参与者只能通过客户端来达到与其他参与者进行研讨的目的。客户端主要负责管理参与者提出的命令并与服务器交互。

服务器端作为群思维导图的中心控制器，需要有良好的网络稳定性，并能快速的和底层数据库进行交互，同时也能收发参与者之间提出的发言，使群体成员之间能进行交互讨论。

2 关键技术

本群思维导图主要实现了两个方面的内容：一是树形目录的实现，将用户的观点用树形目录的形式展现，可以展开和收缩；二是用可视化树形图的形式将用户的观点展现出来，使观点之间的关系更加直观。

2.1 树形目录的实现

树形目录能够很好地表现出层次结构，清楚地展示观点与观点之间的层级关系。本系统使用JQuery EeayUI Tree控件来实现树形目录。

树形目录可以定义在

标签内。该标签中的
• 标签可以表示发言节点。用这种标签以及标签之间的嵌套就能够实现树形目录的显示。

  除了直接用标签来建立树形目录外，EeayUI还提供了loadFilter来处理JSON数据，直接建立树形目录。

  树中的每一个节点都包含如下属性：

  1) ID：节点ID；

  2) text：节点文本；

  3) state：节点状态，有‘open’和‘closed’两种状态。默认为‘open’状态。当设置为‘closed’状态时，将不自动展开此节点；

  4) checked：表示该节点是否被选中；

  5) attributes：节点的自定义属性；

  6) children：子节点数组。

  2.2 可视化树形图的实现

  群思维导图能够用树形结构展现出人的观点和看法，以此表现出人们的思维过程，进而激活整个群体的思维。在这个过程中，观点及观点之间关系的可视化是实现思维导图的关键技术。本系统使用DataV组件库实现发言节点及其关系的可视化。

  DataV组件库是由阿里巴巴集团数据平台与产品部主导开发的开源数据可视化组件库。DataV的目的是致力于推动数据可视化方法在产品中的落地使用。使用DataV可以实现多种类型的图形可视化，包括treemap，tree，stream，matrix等等。其中tree通常用来展示层级数据的父子关系，tree中每一个圆点代表树中的一个节点，由根节点自上向下排列，通过连线表示节点之间的相关性。树图展示最大的问题就是需要大量的空间，DataV的Tree在限定的空间内可以最大程度的保证节点的完全展示并避免重叠。单击节点可以收放节点的子节点。

  相比于其他可视化技术，DataV主要有以下特点：

  1) 使用简便。DataV的库文件中封装了绝大部分功能的实现代码，而用户只需要调用其中的方法就能够生成相应的可视化图形，并能够对其属性进行改变，对图形进行操作。

  2) 兼容性好。DataV几乎支持所有的浏览器，因此不必针对不同的浏览器进行二次开发。同时，相关的动画效果也不需要flash插件的支持，增强了软件的可用性。

  3) 数据可视化性能强。在DataV中，同一个数据源可以用不同可视化方法进行展示。

  4) 主题风格一致。针对不同的数据类型，DataV提供了不同的配色方案，以增强数据的可读性。如果使用了一个主题模式，那么对于该主题下的所有组件都会采用相同的配色方案，使其风格统一。

  为了实现在图中显示相应的数据，需要实现前台和后台之间的数据传递。在DataV中使用json类型的数据进行数据传递，步骤如下。

  步骤一： 定义前台需要的json类型的数据源。

  步骤二：前台通过url来提交表单发送请求，url请求通过过滤器链接，转到相关action类中，action通过service类操作数据库并且将数据转换成json数据转发到相应的目标页面。

  步骤三：将处理好的json数据返回给前端，并将此作为Datav可视化的数据源，tree得到数据源后就会显示树形结构图。

  3 实例分析

  假设有一主题为“理论与实践哪个重要”的研讨，两位参与人Zhan和Zhu对此主题展开研讨，双方用群思维导图发表自己的意见。

  Zhan认为理论比实践重要，而Zhu认为实践比理论更重要。Zhu对于Zhan的观点提出反对，Zhu认为实践是检验理论的标准；而Zhan则提出了两个观点去反对Zhu的观点，分别为理论指导实践和理论在实践之上。最后Zhu对Zhan提出的这两个观点提出了自己的意见，分别为只有实践才能判定理论的真伪和实践是理论的基础。

  整个研讨过程用思维导图来呈现，提出观点界面见图4。

  

  图4 发表观点界面

  参与人如对现有的观点提出自己的意见，可直接在树形目录中对观点进行操作，其中包括对观点的回复、编辑、删除等操作，同时能够对树形目录进行展开和收缩操作(图5)。

  

  图5 树形目录

  在研讨的过程中，参与人可以随时提出自己的意见，树形目录和可视化树形图也会动态进行更新，展现专家的观点和观点之间的关系和整体结构，树形图见图6。

  群思维导图中的可视化树形图清楚地展现了参与研讨的人员提出的观点，而树结构本身能够很好地展现层次结构，因此能够清楚地从图中看出这些观点之间的关系，如反对、支持等。

  4 结束语

  本文对群思维导图进行了分析和设计，并使用JQuery EeayUI Tree控件实现了树形目录，使用DataV组件库实现发言节点及其关系的树形图可视化。本系统基于WEB技术实现，客户端无需安装应用程序，使用方便。与一般的单用户思维导图相比，群思维导图不仅能够可视化展示思维节点及它们之间的关系，还能支持群体在线研讨，反映不同参与人之间的意见关系，引导群体思维，提高研讨效率。本系统既可以作为一个WEB讨论组单独使用，也可以集成到大型群体研讨支持系统中[8]，成为这类系统中的群思维引导工具。

  今后的工作将从两方面展开：一方面是对思维导图本身加以改进，如增加对树形图本身的可视化操作，抛弃使用树形目录的操作形式，可以在树形图上直接进行观点的增删改操作；另一方面在系统中加入相应的模型和算法，使系统能够自动计算不同观点的支持度，使研讨结果更加直观。

  [1] 东尼·博赞,. 思维导图[M]. 李 斯，译. 北京: 作家出版社, 1999.

  [2] 寇继虹, 戴亦舒, 刘 芳,等. 动态思维导图软件TheBrain的功能机制分析[J]. 现代图书情报技术, 2012(12): 45-51.

  [3] 杨 凌. 概念图、思维导图的结合对教与学的辅助性研究[J]. 电化教育研究, 2006(06): 59-61.

  [4] 赵金波, 黎加厚. 利用Inspiration培养学生创造性思维[J]. 中国电化教育, 2003(01): 51-54.

  [5] Van den Braak S W, Van Oostendorp H, Prakken H, Vreeswijk G A W. A critical review of argument visualization tools:Do users become better reasoners[C]. Workshop notes of the ECAI-06 Workshop on Computational Models of Natural Argument, Riva del Garda (Italy), August 28-29, 2006: 67-75.

  [6] 熊才权, 欧阳勇, 梅 清. 基于可信度的辩论模型及争议评价算法[J]. 软件学报, 2014,25(06): 1225-1238.

  [7] Kunz W, Rittel H W J. Issues as Elements of Information Systems[D]. Berkeley: University of California, 1970.

  [8] 熊才权, 李德华. 综合集成研讨厅共识达成模型及其实现[J]. 计算机集成制造系统, 2008,14(10): 1913-1918.

  [责任编校： 张岩芳]

  Design and Implementation of Group Mind Mapping Based on WEB

  ZHAN Danfeng, XIONG Caiquan, ZHAN Yifan, ZHU Jianjun

  (SchoolofComputerScience,HubeiUniv.ofTech.,Wuhan430068,China)

  The group mind mapping based on WEB was designed and implemented, and the use case map and the structure of the system were introduced in this paper. Each modules of the system were then analysed. A visualization technology named DataV was also introduced. Finally, an example was given to illustrate the validity of the system.

  group mind mapping；visualization；DataV

  2014-10-05

  国家大学生创新创业训练项目(201210500023)，国家自然科学基金(61075059 )

  詹丹凤(1991-)，女，湖北黄冈人，湖北工业大学本科生，研究方向为软件工程

  熊才权(1966-),男，湖北鄂州人，工学博士，湖北工业大学教授，研究方向为模式识别与智能系统

  1003-4684(2015)01-0032-04

  TP311

  A