引用本文
张运良, 张兆锋, 张晓丹, 许德山. 使用D3.js的知识组织系统Web动态交互可视化功能实现*. 现代图书情报技术, 2013, 29(7): 127-131
Zhang Yunliang, Zhang Zhaofeng, Zhang Xiaodan, Xu Deshan. Web Dynamic Interactive Visualization of Knowledge Organization Systems with D3.js. New Technology of Library and Information Service, 2013, 29(7): 127-131  
Permissions
使用D3.js的知识组织系统Web动态交互可视化功能实现*
张运良, 张兆锋, 张晓丹, 许德山
中国科学技术信息研究所 北京 100038
修回日期:2013-06-25
基金:本文系国家“十二五”科技支撑计划基金项目“科技知识组织体系共享服务平台建设”(项目编号:2011BAH10B03-2)和中国科学技术信息研究所重点工作项目“汉语科技词系统建设与应用工程”(项目编号:ZD2012-3-2)的研究成果之一。
摘要

从知识组织系统节点、边及相关知识展示的可视化需求出发,结合国内外技术进展和国内知识组织系统服务现状,以D3.js类库为基础进行知识组织系统Web动态交互可视化实现。在实现过程中重点解决动态交互方面的关键问题,并用具体的知识组织系统数据验证D3.js应用于知识组织系统Web动态交互可视化的可行性和简便性。

关键词: 可视化; 知识组织系统; 动态交互; D3.js
Web Dynamic Interactive Visualization of Knowledge Organization Systems with D3.js
Zhang Yunliang, Zhang Zhaofeng, Zhang Xiaodan, Xu Deshan
Institute of Scientific & Technical Information of China, Beijing 100038, China
Abstract

The basic visualization demands about nodes, links and related things of knowledge organization systems are analyzed. After a survey on visualization techniques and the demands, D3.js is chosen to implement the design. The key problems of interactive functions with users in this Web visualization are emphasized. The experiment proves that it is feasible and convenient to use D3.js in a Web dynamic interactive visualization of knowledge organization systems.

Keyword: Information visualization; Knowledge organization system; Dynamic interaction; D3.js
1 引 言

在过去相当长的一段时期内,以叙词表为代表的知识组织系统的主要形式是纸本,且主要应用于人工标引和检索服务,因此对知识组织系统本身的展示没有太高的要求。但是随着数字资源的不断增加,知识组织系统本身的电子化、网络化、本体化发展趋势及其使用范围的不断扩大,知识组织系统本身的可视化展示需求也日益强烈。如国家科技图书文献中心NSTL主导建设的科技知识组织系统STKOS,在服务平台上明确提出了可视化视图与文本和RDF两种视图的同步展示要求。此外,从用户的便捷性考虑,当前知识服务越来越多地放在互联网之上,用户只需要有联网的计算机,通过Web浏览器就可以进行访问,静态页面逐步被动态页面所取代,从而提供良好的用户交互。知识组织系统服务方面,无论是单独做术语服务,还是关联其他资源作为一个更大的知识服务的组成部分,都有Web可视化的需求,尤其是可以动态交互的Web可视化。本文正是基于这一需求,分析知识组织系统中的可视化要素和动态交互具体需求,并给出了一个初步的实现。

2 研究进展及应用需求
2.1 知识组织系统可视化现状

知识组织系统可视化可以归结为信息可视化的大范畴。所谓信息可视化,就是利用计算机来支撑对抽象的信息的可视表示,以便增强人们对非物理抽象信息的认知。信息可视化不仅用视图来显示多维的非空间数据,使得用户加深对数据含义的理解,而且可以用形象直观的图像来指导服务过程,从而改善服务的效率和效果[ 1, 2]。

目前,知识组织系统可视化方面发展并不均衡,一些知识组织系统提供的术语服务,缺乏可视化的直观形式,如联合国粮农组织FAO的农业本体服务AOS http://aims.fao.org/aos/agrovoc/,联机计算机图书馆中心OCLC的FAST术语服务 http://fast.oclc.org/searchfast/等。也有一些服务中开始提供可视化功能,如Visual Thesaurus http://www.visualthesaurus.com/和Visuwords http://www.visuwords.com/等提供对查询词条的可视化,前者可以通过点击切换词条,后者可以进行自由缩放,但是这些服务并不对外提供工具,无法加载自有数据。从头开发可视化功能周期较长,因此可以利用一些工具来实现。

2.2 知识组织系统Web可视化的应用需求

典型的知识组织系统包括叙词表、分类法和本体等,都可以转化为若干三元组(Triples)的形式,基于这些三元组,可视化就变得简单,虽然可视化具体可以形成树形结构和网络结构,但无论哪种,都可以归结为节点(Nodes)以及节点之间的边(Links)。即三元组中的主体和客体形成节点,谓词形成边。此外可能还需要在基本视图上附加一些相关的知识信息,如节点的命名、边的类型等。

知识组织系统Web可视化需要在有限的空间内展现节点、边及相关知识信息,其布局就非常重要。由于不同知识组织系统知识富集程度不同,在具体某个知识组织系统中,每个概念的关联程度也不同,因此Web可视化必须实现缩小和放大功能,以便用户能够清晰地看到关联知识。用户除了输入检索信息外,还存在根据可视化视图访问关联知识的需求,因此在点击相应节点的时候要能够转换可视化视图中心,从而为用户展示新的视图。在知识组织系统结合其他内容提供服务的时候,需要考虑与其他输出内容形式之间的互动,但是本文将问题限定在讨论可视化视图本身的交互部分。

2.3 可视化技术及工具选择

有一些著名的可视化工具不支持Web开发,如Java Jung、34all、SocialAction等[ 2]。目前在Web前端实现可视化的技术主要包括JavaScript、Flash、Silverlight、Java Applet等,其中JavaScript、Flash相对而言绘图速度较快,是Web可视化的首选[ 3]。

在具体的Web可视化工具上,有很多选择,有一定用户基础的常见工具包括Arbor.js、Better World Flux、CartoDB、Chroma.js、Circos、ColorBrewer、Cubism.js、D3.js、Dance.js、Data.js、DataWrangler、Degrafa、Dipity、Envision.js、Exhibit、Flare、Flot、GeoCommons、Gephi、Google Chart Tools、Google Fusion Tables、Google Refine、Highcharts、iCharts、Impure/Quadrigram、JavaScript InfoVis Toolkit、jpGraph、jqPlot、jQuery Visualize、Kartograph、Leaflet、Many Eyes、MapBox、Miso Dataset、Modest Maps、Mr. Data Converter、NodeBox、Paper.js、Peity、Polymaps、Prefuse、Processing(Language)、Processing.js、Protovis、R(Language)、Raphal、Recline.js、Rickshaw、Sigma.js、Tableau Public、Tangle、Timeline、Visualize Free、Visual.ly等 http://selection.datavisualization.ch/
http://www.199it.com/archives/101729.html。其中一些可视化工具本身就是计算机程序语言,另外一些是利用已有语言开发的工具包或者类库。

2.4 D3.js和SVG相关技术

由于使用JavaScript不需要插件,用户体验较好,因此本文最终选择采用这一技术方案。在相关的开源类库中,D3虽然发布的时间不长,但是影响比较大,它也被一些表格插件所使用[ 4]。尽管目前在知识组织系统可视化方面,没有看到基于D3.js的实例,但是在类似的节点-边结构的可视化上已有实现,这些可以作为参考。

D3的含义是数据驱动文档(Data-Driven Documents)[ 5]。它允许绑定任意数据到文本对象模型(Document Object Model, DOM),然后将数据驱动转换应用到文档Document中,利用级联样式表(CSS3)、超文本置标语言(HyperText Markup Language, HTML)及可缩放矢量图形(Scalable Vector Graphics, SVG)实现可视化展示。D3项目开始于2011年,源自2009年斯坦福大学的可视化研究组的Protovi项目[ 6]。D3能够提供更具表达性的框架并且考虑了Web标准提供更好的可视化表现。目前D3的最新版本是3.0,发布于2012年12月http://d3js.org。

D3利用的SVG是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是国际互联网标准组织 (World Wide Web Consortium, W3C)在2000年8月制定的规范的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式[ 7]。各大浏览器厂商最新版本的浏览器基本都支持SVG。因此采用SVG来实现可视化,也符合浏览器市场占有率的发展趋势。

3 知识组织系统Web可视化的实现方案
3.1 总体方案

采用Tomcat6.0.20作为服务器、MySQL5.5作为数据库,数据库中只有一个表——relation表,用于存储全部的概念和概念之间的关系,设计如表1所示:

表1 relation表设计

动态网页采用在普通HTML基础上叠加JavaScript的技术方案,利用JavaScript通过Ajax[ 8]将用户的输入或者交互点击的节点提交给服务器。服务器端采用Servlet与数据交互,并将结果封装好返回给浏览器。为了保证对知识组织系统中的中文词条的处理,配置server.xml将URIEncoding设置为“GB2312”,同时配置filter,将request和response相关的字符集皆设置为“GB2312”,并在web.xml中增加相关filter配置。

由于使用D3.js需要添加引用D3.js的代码如下:

3.2 力定向布局实现

知识组织系统最后形成在D3中布局(Layout)以d3.layout来实现,Layout有一些默认参数,如果不采用默认参数,则需要进行设置。默认的边强度(Link Strength)为1,而摩擦力(Friction)为0.9,摩擦力主要是影响图变化时候的动态衰减直到趋于静止的速度。电荷作用力(Charge)实现不同Nodes之间的吸引和排斥,负值表示排斥,正值表示吸引。向心力(Gravity)不是重力的含义,如果需要重力可以用正的Charge来实现,Gravity类似一个比较弱的牵引力,将所有的节点拉向布局的几何中心。实现流程如图1所示:

图1 力定向布局功能实现流程

3.3 关系类型附加功能实现

一般在词类图中,以svg:line元素画线,但是该元素不支持在线上添加文字说明,无法显示关系类型,因此以svg:textPath来代替实现关系展示,并以startOffset属性确定展示位置,实现流程如图2所示:

图2 关系类型附加功能实现流程

4 交互关键功能实现
4.1 用户输入

用户在文本框中输入具体内容,程序将输入的内容反馈给服务器进行检查,实现流程如图3所示:

图3 用户输入功能实现流程

当用户点击可视化视图的某个节点时,利用checkInput函数反馈给服务器进行查询,这一功能通过为节点定义onclick事件的响应来实现。无论是通过文本框输入查询还是直接点击节点,通过上述操作都能够实现同样的效果。

4.2 数据传递和处理功能

在利用D3实现可视化的应用中,可以直接将数据置于JSON文件中,或者附加在HTML网页上。但是由于知识组织系统相对比较庞大,一次利用的数据并不多,此外还可能存在数据安全的问题,因此可以将数据库置于应用服务器或者单独的数据库服务器中。浏览器获得用户输入或者点击后利用HttpRequest向服务器发送Post请求进行处理,得到输入信息InputText的值,并在服务器端利用Servlet进行数据库查询,再利用out.print函数输出查询结果,如果没有相关数据,返回False,否则返回打包好的相应节点和边的信息,节点和边的信息中间以自己设置的分隔符号(如“###”)分隔。

利用xmlHttp.readyState和xmlHttp.status判断服务器的响应是否完成以及交易是否成功,在满足以上情况下,处理返回的字符串,将其转化为D3可以直接处理的JSON Object格式,本文以eval函数实现,实现流程如图4所示:

图4 数据传递和处理功能实现流程

4.3 画面动态交互

画面动态交互主要包括自由缩放、切换核心节点和拖曳。

为了实现自由缩放功能,需要将所有的节点包括在一个SVG的分组元素(Group Element)中,后续的操作都是针对这一分组,在SVG中用 和来定义。缩放(Zoom)的核心功能由自定义的redraw函数实现,而redraw函数主要利用d3.transform.translate函数来实现,响应鼠标的Zoom操作,获得变形的位置信息以及尺度。实现流程如图5所示:

图5 数据传递和处理功能实现流程

画面刷新主要用于以下几种情况:初始载入数据,输入数据,对某一节点进行点击。对展示可视化结果的部分拖曳是利用d3.force.drag函数来实现的。 .

5 应用效果评估

采用新能源汽车领域汉语科技词系统的部分数据进行测试,部分示例数据如表2所示:

表2 relation表部分示例数据
可视化结果如图6所示:

图6 可视化结果展示

为了测试系统对更大规模数据的有效性,采用新能源汽车领域汉语科技词系统的部分数据进行测试,包含56 826条数据,涉及不同词条12 299条,在这个数据集下,查询和可视化展示仍然可以正常响应。为了测试较为极端的情况,从中选择关系较多的词条“热交换器”作为实例,该词条共有51条关系数据,以其为中心的结果如图7所示:

图7 较多数据展示的结果

从图7可以看出,整体布局较为合理,虽然局部出现了遮挡,但是可以通过拖曳看到相关内容,并且可以配合自由缩放使用。由于所有的可视化功能是在一个分区DIV中实现,也可以自由定义其位置,因此可以和其他知识服务内容一起展示。

6 结 语

本文从知识组织系统Web动态交互可视化的需求出发,以D3.js类库为基础,实现了知识组织系统以一个核心概念为中心的节点、关系展示和交互。在基本功能上,主要是利用力定向布局功能实现节点位置的合理分布,以svg:textPath元素代替svg:line元素画节点之间的边,实现了关系类型的展示。在交互方面重点实现了用户输入和节点点击行为的响应以及在浏览器和服务器之间数据的传递处理、JSON格式的转换以及自由缩放、更新功能(包括拖曳更新)的实现。基于D3.js,相对来说简单易行,大量可视化工作已经由类库完成,具有一定的推广价值。本文基于D3.js实现了知识组织系统可视化方面的原型,满足了动态交互的基本要求,未来在交互细节上还需要深入研究和实现。

参考文献
[1] Kirk A. Data Visualization: A Successful Design Process [M]. Packt Publishing, 2012. [本文引用:1]
[2] 梁健, 张兆锋, 史新, 等. 汉语科技词系统调研报告(4)——知识组织系统关键技术[R]. 北京: 中国科学技术信息研究所, 2009. (Liang Jian, Zhang Zhaofeng, Shi Xin, et al. Research Report on Chinese Science & Technology Vocabulary System (4)——Key Techniques of Knowledge Organization System[R]. Beijing: Institute of Scientific and Technical Information of China, 2009. ) [本文引用:2]
[3] 赵越, 陈志伟, 蔡淑惠, 等. 大数据量科学计算数据的动态 Web可视化[J]. 现代计算机, 2012（5）: 3-6. （Zhao Yue, Chen Zhiwei, Cai Shuhui, et al. Dynamic Web Visualization of Large Scientific Computing Data[J]. Modern Computer, 2012（5）: 3-6. ） [本文引用:1]
[4] Dewar M. Getting Started with D3 [M]. O’Reilly Media, 2012. [本文引用:1]
[5] Bostock M, Ogievetsky V, Heer J. D3: Data-driven Documents[J]. IEEE Transactions on Visualization and Computer Graphics, 2011, 17（12）: 2301-2309. [本文引用:1] [JCR: 1.898]
[6] Heer J, Bostock M. Declarative Language Design for Interactive Visualization[J]. IEEE Transactions on Visualization and Computer Graphics, 2010, 16（6）: 1149-1156. [本文引用:1] [JCR: 1.898]
[7] Dailey D, Frost J, Strazzullo D. Building Web Applications with SVG[M]. Microsoft Press, 2012. [本文引用:1]
[8] Zakas N C, McPeak J, Fawcett J. Professional Ajax [M]. The 2nd Edition. Wiley Publishing, 2007. [本文引用:1]