D3js库在OA管理系统中状态数据可视化的应用*

周 航 马 曾 贾瑞凤

(海军潜艇学院 青岛 266199)

D3js库在OA管理系统中状态数据可视化的应用*

周 航 马 曾 贾瑞凤

(海军潜艇学院 青岛 266199)

办公自动化(OA)系统旨在通过信息技术,为使用者提供简洁、高效的任务布置与人员状态管理平台。但现有电子表格式的工作计划表不易阅读,管理者在时间轴上不易掌握工作的整体进度。论文基于D3js库,应用数据可视化方法,将工作计划的时间和文本数据转换为具有形状和颜色属性的图形信息,并根据数据特征和管理需求提出了一种适于日历型应用的数据可视化布局模式。并设计了B/S模式与D3js库相结合的OA系统结构,为管理者提供直观、可交互的信息平台。

数据可视化; 办公自动化; D3js库; B/S模式; 可缩放矢量绘图

1 引言

办公自动化(Office Automatic,OA)技术对提高事务管理效率具有重要的意义。美国Microsoft公司的Office Outlook软件和IBM公司的Lotus Note软件[1]等平台,都具有日程管理、事务规划等功能。但上述软件突出了通过邮件系统协同各部门之间工作流的能力,而对非协作任务部署的易用性和可视化能力支持不足。数据可视化技术[2～3]是将数字和文本等信息进行可视化处理,利用视觉对图形、颜色的快速感知,为用户提供更高效的信息获取方式。当前针对多种可视化工具进行了研究,例如在.NET平台使用的ILOG Diagrammer控件[3]可将图形演示集成到.NET窗体中,能够绘制甘特图、流程图等布局;而采用可缩放矢量图形(Scalable Vector Graphics,SVG)库在电力行业的应用[4],实现了在Java平台上对电网运行数据的感知和交互。办公局域网更适于实现B/S(Browser/Server,浏览器/服务器)模式的系统结构,文献[5]设计了SVG与B/S结合的一种运行监控系统。但SVG复杂的语法对于OA系统开发和复用成本较高,相关文献对适合OA系统的数据布局方式也罕有研究。

数据驱动文档脚本(Data-Driven Documents JavaScript,D3js)库[6～7]是一种依托Web浏览器的数据图表绘制函数库,并已在消费数据分析[8]、地理信息系统[9]等方面得到了应用。其绘图机制建立在SVG库之上,具有无级缩放、可交互特性,语法上则更为简洁直观,函数采用类似jQuery的连缀调用[10]形式。本文将B/S模式与D3js库结合,提出了一种按照日期序列表示人员工作状态的日历型数据可视化布局模式,并设计了相应的数据可视化方法。通过实例分析,说明本方法使管理者可以直观、高效地了解人员动态。

2 基于B/S和D3js的总体框架

设计B/S结构的OA办公系统架构,将系统分为Web浏览器端和Http服务器端两个部分,如图1所示。两者通过TCP/IP网络连接,各处理模块按照信息流相继执行,完成数据编辑、存储和展示。

图1 使用D3js脚本的B/S模式系统架构

在服务器端,具有完成工作状态数据的显示逻辑模块和编辑逻辑模块,其数据从SQL数据库的“人员表”和“任务表”中采集。其中,显示逻辑根据预设或用户新设的任务查询时段,从任务表中获取任务条目,并实现从任务条目到便于显示的任务数据集的预处理。

在浏览器端,实现了对任务数据的查询、编辑和可视化展示。将使用者角色分为两类:用户和管理员。对管理员角色赋予相应的权限,可对数据进行编辑修改。而用户角色主要使用显示页面,通过设定查询时段和图形颜色查看人员状态的可视化表示。

3 数据库存储模型与数据预处理

数据是可视化的对象。先定义影响可视化布局模式的任务数据含义,再通过特定的数据预处理方法得到便于在B/S架构传输的数据区。

3.1 SQL数据表定义

SQL数据库是一种关系型数据库,将系统需表示的数据划分为数据表并建立表间关系。因此,分别定义了存储人员信息的“人员表”和存储人员任务信息的“任务表”。初始系统应建立包含所有相关人员信息的“人员表”,此时“任务表”为空。随着任务的分配,在任务表中添加相应的记录条目。任务表条目记录了每人每项任务的信息,其字段定义如表1所示。

表1 SQL任务表的字段定义

按照上述字段的每个条目,包含了任务信息及执行该任务的人员信息。任务信息主要包括任务的起止时间、任务级别和说明信息。在定义起止时间时,将一天分为5个时段:上下午各2时段及晚间1时段。而任务级别则表示该任务的紧迫或困难程度。

3.2 数据预处理及数据区定义

通过查询SQL数据库的任务表,得到的用于可视化的基础数据为任务记录条目的集合,并不适于直接图形展现,需对任务条目集进行预处理。为提供用户有关人员状态的全面信息,设计了如下四类待展示数据: 1) 姓名数组,获取全部人员的姓名文本; 2) 日期数组,按照设定的区间计算得到日历信息; 3) 状态数组,与日历数组对应,按每人每天5个时段构建二维数组,记录任务级别信息; 4) 说明数组,与状态数组对应的每个时段相应任务的说明文本。状态和说明数组为二维数组,通过遍历查询任务表得到的条目集合,对数组中对应位进行赋值操作。

为了从服务器端向浏览器端传递可视化基础数据,按照上述数组定义了四个hidden类型的input控件,并设定其运行在服务器端。该控件的value属性作为数据存储空间,分别存放相应的数组数据。定义方法如下:

〈div〉 〈%-- 提供给D3js的绘图数据 --%〉

〈input id="NameList" type="hidden" runat="server" /〉

……

〈/div〉

当控件的runat属性设定为server时,服务器端代码可对该控件进行赋值。网页端通过读取控件的value属性,实现可视化数据在服务器端与浏览器端的传递。

4 基于D3js的数据展示方法

浏览器端调用相应的input控件获取数据后,可通过设定的D3js脚本进行图形绘制。

4.1 浏览器端显示区域设计

在Web页面的布局中,一般使用基于〈div〉标签的页面定位技术。在设计可视化的展示页面时,将页面分为两个部分,即参数设定区和数据绘图区。在参数设定区,通过〈div〉和〈table〉标签的组合使用定位了相应的文本(Label)控件、按钮(Bottom)控件、下拉列表(DropDownList)控件和颜色选择控件,实现了绘图的时段选择和颜色选择。其中颜色选择控件结合了input控件和具有简洁界面的Simple-Color.js第三方脚本实现颜色的可视化选择。在参数设定区下方,定义了用于包含D3js绘图区的〈div〉标签,如图2所示。

D3js绘图区包括四个部分:纵向的姓名列表、横向的日历列表、状态显示区和随鼠标移动的任务提示框。状态显示区使用一个具有特定颜色的矩形框,表示某人在对应时段的工作状态。如图2中的示例,矩形的布局规则为:以五个具有黑色边框的相邻矩形表示工作日中的时段,以具有白色边框的五个相邻矩形表示休息日中的时段;一周中的相邻天以较小空间隔开,而周之间有较大“周间隔”空间;每个矩形在横向对应一名人员,在纵向对应一个时段。

图2 Web页面的数据显示区域设计

当鼠标移动到矩形内部时,页面在鼠标旁显示一个提示框,内有相应的任务说明文本。当鼠标移开后,提示框消失。同时,包括日期序列和状态显示区的区域具有可缩放特征,便于用户在不同时间粒度全面了解任务分配的整体或局部情况。上述页面提供了用户具有互动性、易于辨识的图形化数据展示区。

4.2 数据展示方法设计

D3js库是一种JavaScript脚本库,其运行在浏览器端。因此,在可视化代码的初始阶段需从服务器端获取待可视化数据。先读取2.2节定义的input控件的value属性,由于value属性的字符串,对于二维数组在赋值前需转换为一维数组,则上述代码在读取时通过分号截断,还原为二维数组。如:

//数据1:姓名数组

var dataset = document.getElementById("Data_No1").value.split(";");

D3js基于文档对象模型(Document Object Model,DOM)接口将数据与文档元素绑定,通过编辑和绘制文档以展示数据。其文档即是超文本标记语言(Hyper Text Markup Language,HTML)文档,实现了数据与网页元素的互操作。

按照图2的展示布局,使用D3js设计了显示区的HTML文档树形结构,如图3。首先,使用d3.select("#Div_ID")选择绘图区的〈div〉节点,并通过append()函数添加SVG绘图区。在〈svg〉节点下,分别创建不需缩放的用于显示姓名列表的图形集合〈g〉节点和可缩放区域的〈g〉节点。通过selectAll()函数分别创建空白图形集,并绑定待可视化的数据数组。最后,使用append()函数在图形集中添加与数组长度对应的图形元素。另外,在顶层〈div〉节点下创建了用于显示任务说明的提示框〈div〉,并进行了说明数组。

图3 基于DOM的D3js绘图树形结构

实现了上述数据与图形的绑定后,还需设定图形元素的属性实现图形的布局,如字形字号、颜色、位置及大小等。根据人员状态数据的特点和便于用户理解的需求,设计了一种二维的具有颜色特征的矩形集合布局模式。在状态显示区中的矩形,其颜色对应于状态数组中的数据值。通过无名函数function(d)获取矩形对应的数据值d,并据此设置颜色。将颜色值赋予矩形的填充(fill)属性。示例代码如下:

.attr("fill", function (d) { //设置颜色

var mycolor = 0;

switch (d) {

case "0": //空闲

mycolor = green; break;

......

}

return mycolor;

})

在布局中,矩形的另一个关键属性为位置坐标。矩形的y坐标易于确定,对应同一人的一行矩形的y坐标相同。而x坐标按照布局模式,需考虑同一天内、天与天间及周与周间等因素。使用无名函数function(d,i)获取矩形对应的数组序号i。示例代码如下:

.attr("x", function (d, i) {//设置矩形的x坐标

var myStep = parseInt(i / 5) * dayStep; //计算每天五个时段的间隔

myStep += parseInt((i + dofweek * 5) / 35) * dayStep * weekStep; //计算每周七天的间隔

return i * rectWidth + myStep;

})

代码中,常量dayStep为天间隔,常量weekStep为周间隔,常量rectWidth为矩形宽度,变量dofweek为数组起始日的星期序号(星期一至日为0～6)。

4.3 人机交互方法设计

可交互的数据显示区不仅可以进行图形的静态展示,还能够响应用户的动作并进行相应的图形变换。根据用户读取人员状态时的需求,设计了状态显示区的横向缩放和任务说明的浮动提示框两类交互功能。D3js通过on()函数设定网页元素的事件和处理函数。

为了实现状态显示区的缩放,先创建一个缩放行为:

var zoom = d3.behavior.zoom()//创建一个缩放行为

.scaleExtent([0.3, 3])//设置缩放的范围

.on("zoom", function (d) {

d3.select(this).attr("transform",

"scale(" + d3.event.scale + " 1)"); //缩放仅x轴

});

缩放的尺度为0.3倍到3倍,缩放行为中定义了缩放(zoom)事件,其处理函数设定transform属性为尺度变换(scale)。其中d3.event.scale的值为用户交互时,鼠标滚轮指定的缩放值。将缩放行为与实现缩放的绘图区绑定,即在相应的〈g〉元素后调用call()函数,实现缩放行为

var g = svg.append("g").call(zoom); //建立缩放画布

对于提示框,先设定了其〈div〉的透明度(opacity)属性的初始值为0,即不可见。之后,使用on()函数设定了两个事件:鼠标移入(mouseover)事件和鼠标移出(mouseout)事件。在mouseover事件中,使用html()函数输出对应的任务说明文本,并设定其opacity为1即可显示提示框。在mouseout事件中,再将opacity属性设为0,实现鼠标移出矩形时,提示框隐去。

5 实验案例

本系统设计为B/S模式,在服务器端的Windows平台上安装了互联网信息服务(Internet Information Services,IIS)7.0组件用于发布网站。在浏览器端,因为SVG仅支持IE9及以上浏览器,选择Windows7与IE9软件。开发环境使用VS2010的C#、SQL2008与.NET 4.0平台。

图4 具有浮动提示框的数据D3js展示区

图5 时间尺度放大后的概览图

如图4所示的部分界面,对具有13人的工作组在3.1到3.12的2周内分配了相应的任务,根据任务级别的不同显示不同的颜色。当鼠标指向一个色块时,显示浮动的当前状态提示框。在窗口的顶端为绘图参数区,有“时段选择”和“颜色选择”及控制按钮。

通过鼠标滚轮放大绘图区的时间尺度,使每个矩形缩小显示了3.1到3.19的3周内的任务安排,便于使用者了解更长时间段的任务分配情况,如图5。通过上述数据的可视化展示和交互行为,为使用者提供了一个易于理解、可交互的显示界面。

6 结语

针对文本、数值数据不便于使用者理解,造成信息系统使用效率不高的问题,设计了一种B/S模式的基于D3js库的数据可视化方法,该方法具有可交互的特性。并根据人员任务状态数据的特点,提出了一种适于日历型数据的二维矩形排列的可视化布局模式。本系统中,通过隐藏的input控件在服务器与浏览器间传递数据,利用D3js在网页的〈svg〉节点下创建了可缩放的绘图区〈g〉,并通过设定〈div〉的透明度opacity属性实现了浮动的文本提示框。通过实例说明,本文为用户提供了一种易于理解、可交互的显示界面的设计方法。

[1] 刘紫玉,王巧玲,梁普选.基于B/S模式的机关办公自动化系统实现[J].计算机应用研究,2004(12):218-220. LIU Ziyu, WANG Qiaoling, LIANG Puxuan. Achievement of One Organ Office Automation System Based on B/S Structure[J]. Application Research of Computers,2004(12):218-220.

[2] 张婉,王磊,谭昌勇.Windows环境下基于Qt的SEGY格式地震数据可视化[J].计算机与数字工程,2008,220(2):10-12. ZHANG Wan, WANG Lei, TANG Changyong. Visualization of Earthquake Data in SEGY Format Based on Qt of Windows System[J]. Computer & Digital Engineering,2008,220(2):10-12.

[3] 洪陆合,蔡建立,吴顺祥.基于第三方控件的数据可视化系统的设计与实现[J].计算机工程与设计,2010,31(13):3096-3099. HONG Luhe, CAI Jianli, WU Shunxiang. Design and Implementation of Data Visualization System Based on Third-Party Control[J]. Computer Engineering and Design,2010,31(13):3096-3099.

[4] 赖晓文,陈启鑫,夏清,等.基于SVG技术的电力系统可视化平台集成与方法库开发[J].电力系统自动化,2012,36(16):76-81. LAI Xiaowen, CHEN Qixin, XIA Qing, et al. Development of Power System Visualization Platform and M ethods Library Based on SVG Technology[J]. Automation of Electric Power Systems,2012,36(16):76-81.

[5] 金丰,王瀛洲,焦嵩呜.DCS监控画面的Web发布实现[J].计算机仿真,2013,30(6):296-299. JIN Feng, WANG Yingzhou, JIAO Songming. Realization Scheme of DCS Monitoring Web Technology[J]. Computer Simulation,2013,30(6):296-299.

[6] Bostock M, Ogievetsky V, HEER J. D3: Data-driven Documents[J]. IEEE Transactions on Visualization and Computer Graphics,2011,17(12):2301-2309.

[7] 吕之华.精通D3.js:交互式数据可视化高级编程[M].北京:电子工业出版社,2015:1-3,58. LV Zhihua. D3.js Mastery: Professional Interactive Data Visualization[M]. Beijing: Publishing House of Electronics Industry,2015:1-3,58.

[8] SHUICHI T, NOBORU N. Visualization-based medical expenditure analysis support system[C]//the 37th IEEE Engineering in Medicine and Biology Society(EMBC), Milan: IEEE,2015:1600-1603.

[9] 蔚元方,郑秋生,李向东.基于D3的地图信息可视化研究[J].中原工学院学报,2015,26(4):59-64. YU Yuanfang, ZHENG Qiusheng, LI Xiangdong. Research on Map Information Visualization Based on D3[J]. Journal of Zhongyuan University of Technology,2015,26(4):59-64.

[10] 赵增敏,李惠敏.基于jQuery框架的Ajax应用开发[J].制造业自动化,2012,34(10):18-20. ZHAO Zengmin, LI Huimin. Ajax Application Development Based on jQuery Framework[J]. Manufacturing Automation,2012,34(10):18-20.

Application of D3js in Data Visualization Method of Working Status in OA System

ZHOU Hang MA Zeng JIA Ruifeng

(Navy Submarine Academy, Qingdao 266199)

The office automatic (OA) system provides a simple and efficient management platform of staff and tasks using information technology. But the current list or table pattern of schedule is hard to read, and the manager is difficult to handle the entire progress of work. This paper converts the information of time and text of working schedule to graphs with shape and color properties using the data visualization method based on D3js library. According to data features and management demands, the layout of graph elements of data is proposed for the application with calendar data. The system framework combines the Browser/Server structure and D3js library, which provides an understandable and interactive information system.

data visualization, office automation, Data-Driven Documents JavaScript, Browser/Server pattern, scalable vector graphics Class Number TP311

2016年10月3日,

2016年11月24日

周航,男,博士,助教,研究方向:软件工程。马曾,女,硕士,讲师,研究方向:系统仿真。贾瑞凤,女,硕士,讲师,研究方向:系统仿真。

TP311

10.3969/j.issn.1672-9722.2017.04.024