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