基于SVG和Vue的數(shù)據(jù)過程可視化設(shè)計①

林 晨,鄧 錄,董 璐

(中國電子科技集團公司第五十二研究所,杭州 310012)

1 引言

大數(shù)據(jù)時代,數(shù)據(jù)成爆炸式增長,并且數(shù)據(jù)類型多樣,格式復(fù)雜,但是存在數(shù)據(jù)分散,數(shù)據(jù)間關(guān)聯(lián)少的問題,無法進一步對數(shù)據(jù)深度利用.數(shù)據(jù)過程就是對數(shù)據(jù)的深度利用和對大數(shù)據(jù)的處理,包含數(shù)據(jù)采集,錄入,標(biāo)準(zhǔn)化轉(zhuǎn)換和輸出的整個過程.數(shù)據(jù)過程可視化是為了使用戶能更清晰地了解數(shù)據(jù)深度利用和大數(shù)據(jù)處理的過程,形象地顯示數(shù)據(jù)過程,加深理解大數(shù)據(jù)處理.但是傳統(tǒng)的數(shù)據(jù)過程的可視化只是顯示整個數(shù)據(jù)過程,不能對數(shù)據(jù)過程進行拖拽式編輯,無法對特定業(yè)務(wù)需求的算子進行添加和數(shù)據(jù)錄入.現(xiàn)有的可視化解決方案主要有導(dǎo)入Visio 流程圖、百度的ECharts 庫、螞蟻金服的AntV G6 庫和美國專家開發(fā)的D3 庫.

現(xiàn)有的可視化方案存在一定的缺陷,比如使用Visio 繪制流程圖,功能強大,但是只能以靜態(tài)圖片形式展示.基于Web 技術(shù)開發(fā)的可視化圖表庫,如ECharts庫,AntV G6 庫和D3 庫.ECharts 庫適用于基礎(chǔ)圖表,對于用戶交互需求較強不適用.AntV G6 提供了一系列設(shè)計優(yōu)雅、便于使用的圖可視化解決方案,能幫助開發(fā)者搭建屬于自己的圖可視化、圖分析、或圖編輯器應(yīng)用[1].但是AntV G6 可視化解決方案擴展性差,對于模塊間的連線規(guī)則或者相互關(guān)系有較多需求的流程圖不適用.D3(data-driven documents)[2]是基于SVG和JQuery 開發(fā)的數(shù)據(jù)驅(qū)動文檔.D3 將強大的可視化、動態(tài)交互和基于數(shù)據(jù)驅(qū)動的DOM 操作完美結(jié)合一起,直接操作真實的DOM 節(jié)點,將數(shù)據(jù)轉(zhuǎn)化為可視化圖形[3].D3 與AntV G6 相比擴展性更高,不依賴于分辨率,但是對于大數(shù)據(jù)情形,如果數(shù)據(jù)經(jīng)常發(fā)生改變,圖表就會不斷地重新渲染,即會經(jīng)常操作真實DOM,耗費性能.

針對上述存在的問題,本文提出基于SVG 和Vue技術(shù)的數(shù)據(jù)過程可視化設(shè)計和實現(xiàn)方案.該方案可以動態(tài)、直觀地顯示整個數(shù)據(jù)過程,能對數(shù)據(jù)過程中的算子進行拖拽式創(chuàng)建和編輯,豐富用戶的交互體驗.該方案擴展性強,不依賴于分辨率,采用虛擬DOM 技術(shù)渲染頁面[4],不會頻繁操作真實DOM,對數(shù)據(jù)進行雙向綁定,只需要考慮數(shù)據(jù)的變化,不需要考慮頁面元素的改變,提高了開發(fā)效率和保證了良好性能.

2 關(guān)鍵技術(shù)

2.1 Vue

Vue.js 是以數(shù)據(jù)驅(qū)動為核心的用戶交互式的漸進式Web 框架[5],與其他前端框架的差異是,Vue 的核心構(gòu)建思想是采取自底向上的設(shè)計,使用數(shù)據(jù)雙向綁定和組件化構(gòu)建單頁面應(yīng)用[6].Vue 最大的優(yōu)勢是使用虛擬DOM 來渲染頁面,不需要頻繁操作真實DOM,數(shù)據(jù)雙向綁定,提高了性能.

2.2 RESTful Web

RESTful Web[7]服務(wù)是基于HTTP 應(yīng)用協(xié)議的標(biāo)準(zhǔn)化、通用化的操作實現(xiàn)對資源的操作[8].客戶端通過URL,使用不同的HTTP 請求方法來獲取和處理資源,并且響應(yīng)可以被標(biāo)志為可緩存或者不可緩存,將客戶端和服務(wù)端上的資源分離,提高了網(wǎng)絡(luò)效率[9].

2.3 Element UI

Element UI 是餓了么公司開發(fā)的基于Vue 的開源組件庫,包含常見的組件如按鈕,輸入框等,可快速實現(xiàn)頁面開發(fā)[10].

3 系統(tǒng)設(shè)計

3.1 系統(tǒng)框架設(shè)計

數(shù)據(jù)過程可視化系統(tǒng)提供動態(tài)添加及連接不同的算子來對大數(shù)據(jù)深度利用和處理的功能.基于B/S 架構(gòu)開發(fā)的數(shù)據(jù)過程系統(tǒng)框架如圖1所示.

圖1 系統(tǒng)框架圖

B/S 架構(gòu)分為客戶端和服務(wù)端兩部分,數(shù)據(jù)過程服務(wù)端是通過RESTful 接口接收數(shù)據(jù),根據(jù)數(shù)據(jù)的類型(批、流),流算子通過NiFi 服務(wù)執(zhí)行,批處理通過azkaban 調(diào)度,將任務(wù)封裝好交給azkaban 執(zhí)行.客戶端是基于Vue、ElementUI 框架和SVG 技術(shù)構(gòu)建的數(shù)據(jù)過程流程圖頁面.SVG 技術(shù)實現(xiàn)算子模型和算子間的連接線的創(chuàng)建,并基于Vue 的數(shù)據(jù)雙向綁定來實現(xiàn)算子在面板上的移動、導(dǎo)航、編輯及刪除等操作功能.本系統(tǒng)數(shù)據(jù)庫的設(shè)計是用戶自主選擇數(shù)據(jù)庫,包括達(dá)夢數(shù)據(jù)庫,MySQL 和Oracle.客戶端和服務(wù)端的通信使用Ajax 異步請求進行JSON 數(shù)據(jù)的傳輸,同時采用HTTPS 協(xié)議保證傳輸過程的安全性和保密性.本文重點闡述數(shù)據(jù)過程客戶端的功能設(shè)計和實現(xiàn)過程.

3.2 客戶端功能設(shè)計

系統(tǒng)的客戶端功能包含算子面板,畫布,工具欄,導(dǎo)航和屬性5 個模塊,功能設(shè)計圖如圖2所示.

圖2 數(shù)據(jù)過程客戶端設(shè)計圖

算子面板模塊負(fù)責(zé)顯示處理數(shù)據(jù)深度利用的算子,比如采集算子和處理算子,并提供算子的拖拽式創(chuàng)建功能.畫布模塊負(fù)責(zé)大數(shù)據(jù)處理過程的創(chuàng)建和處理,通過采集算子獲取數(shù)據(jù)庫目錄下的某一類數(shù)據(jù),連接處理算子對該數(shù)據(jù)進行去重或者異常值剔除等功能.工具欄模塊負(fù)責(zé)算子的復(fù)制、刪除和畫布位置縮放的操作功能.導(dǎo)航模塊負(fù)責(zé)快速定位畫布中算子的位置.屬性模塊負(fù)責(zé)顯示算子的屬性,并將修改后的屬性值存儲到數(shù)據(jù)庫,若屬性數(shù)據(jù)不符合規(guī)則,則不能執(zhí)行整個數(shù)據(jù)過程.本文重點分析畫布模塊和屬性模塊的設(shè)計.

3.3 系統(tǒng)各模塊詳細(xì)設(shè)計

3.3.1 畫布模塊

畫布模塊負(fù)責(zé)大數(shù)據(jù)處理過程的創(chuàng)建和處理,包含算子繪制和算子連接功能.本系統(tǒng)是基于采集算子和處理算子對復(fù)雜大數(shù)據(jù)進行深度利用和處理,采集算子是指數(shù)據(jù)源類的算子,比如關(guān)系型數(shù)據(jù)庫采集算子;處理算子是連接采集算子后對數(shù)據(jù)進行處理的一類算子,如異常值剔除算子,算子繪制是基于SVG 技術(shù)實現(xiàn).通過采集算子獲取達(dá)數(shù)據(jù)庫目錄下的某一類數(shù)據(jù),可以連接多種處理算子對該類數(shù)據(jù)處理,比如數(shù)據(jù)清洗和數(shù)據(jù)替換.不同算子的連接是基于SVG 技術(shù)繪制連接線,連接規(guī)則是基于Vue 技術(shù)構(gòu)建,比如處理算子必須前置連接采集算子,一個算子如果超過最大連接限制數(shù),其他算子則不能連接該算子.算子相互連接完成后執(zhí)行數(shù)據(jù)過程,這樣會將處理后的數(shù)據(jù)存放到指定數(shù)據(jù)表中,畫布模塊的原理如圖3所示.

圖3 畫布模塊原理圖

3.3.2 屬性模塊

屬性模塊為算子的主要配置屬性,算子的連接和使用都依賴于屬性數(shù)據(jù).基于Vue 技術(shù)將繪制的算子和從數(shù)據(jù)庫中獲取的算子屬性數(shù)據(jù)雙向綁定,修改算子的配置屬性存儲到數(shù)據(jù)庫,不需要重復(fù)修改數(shù)據(jù)結(jié)構(gòu),動態(tài)地更新算子.如果不按照規(guī)則修改算子屬性,則整個數(shù)據(jù)過程無效.算子的屬性數(shù)據(jù)量大,為了簡化數(shù)據(jù)結(jié)構(gòu)和降低數(shù)據(jù)傳輸率,將屬性對象轉(zhuǎn)化為JSON字符串.采集算子和處理算子主要屬性信息表如表1和表2所示.

表1 采集算子主要屬性表

表2 處理算子主要屬性表

4 系統(tǒng)實現(xiàn)

本章重點講述基于SVG 和Vue 技術(shù)的數(shù)據(jù)過程實現(xiàn).該系統(tǒng)的實現(xiàn)基于Vue 組件化機制分為算子,畫布,屬性,導(dǎo)航和工具欄5 大組件.基于SVG 的繪制和Vue的數(shù)據(jù)雙向綁定功能,數(shù)據(jù)過程可視化系統(tǒng)的實現(xiàn)方案主要包括繪制功能,數(shù)據(jù)構(gòu)建及傳遞和交互功能.

4.1 繪制功能

繪制一個數(shù)據(jù)過程包含算子繪制和算子連接兩大要素.算子連接是繪制有邏輯關(guān)系的兩個算子之間的線段,并且需要滿足相應(yīng)的連接規(guī)則[11].

4.1.1 算子繪制

算子面板和畫布組件需要對算子進行繪制.算子面板組件是基于Element UI 的Collapse 折疊面板實現(xiàn)算子的分類,算子分為采集組件和處理組件兩大類,如圖4所示.

圖4 算子類型

算子繪制是基于SVG 二維矢量圖的一個繪制空間,首先使用＜svg＞＜/svg＞標(biāo)簽構(gòu)建空間,再使用分組元素g 來表示一組算子.每個算子使用矩形元素＜rect＞＜/rect＞繪制,設(shè)置x、y的屬性值表示算子的坐標(biāo),width 和height 的屬性表示算子的長寬,再設(shè)置rx和ry屬性使矩形產(chǎn)生圓角.算子的圖片是使用pattern 元素定義,通過屬性type 對應(yīng),然后在rect 標(biāo)簽中使用fill 屬性引用來填充,算子創(chuàng)建過程的流程圖如圖5所示.

圖5 算子創(chuàng)建過程

畫布組件中的算子是數(shù)據(jù)過程的一個重要元素,繪制的算子需要包含4 個連接點來連接其他算子.選擇的算子會顯示4 個連接點,不被選中的算子則不顯示.算子的連接點是使用＜circle＞標(biāo)簽創(chuàng)建,4 個點的相對坐標(biāo)分別為(-0.5,0),(0.5,0),(0,-0.5),(0,0.5),再通過屬性transform 向X 軸平移算子的X 軸坐標(biāo)乘以點的相對X 軸坐標(biāo),向Y 軸平移算子的Y 軸坐標(biāo)乘以點的相對Y 軸坐標(biāo),這樣算子的4 個連接點就分別位于算子4 條邊的中心位置,如圖6所示.

圖6 算子

算子數(shù)據(jù)包括唯一ID,名稱,類型,長寬,類型,X 軸和Y 軸坐標(biāo),4 個連接點相對坐標(biāo)所構(gòu)成的數(shù)組,屬性JSON 字符串,連接規(guī)則數(shù)組,參數(shù)和描述信息.由于算子屬性對象中的屬性比較多,為了簡化數(shù)據(jù)結(jié)構(gòu)和降低數(shù)據(jù)傳輸率,將屬性對象轉(zhuǎn)化為JSON 字符串.基于Vue 的數(shù)據(jù)雙向綁定,算子數(shù)據(jù)貫穿于整個數(shù)據(jù)過程.

4.1.2 算子連接

算子的連接算法是根據(jù)算子間的連接規(guī)則進行連接.連接線數(shù)組存放連接線唯一的ID,連接線對應(yīng)的源算子和目標(biāo)算子的唯一ID,數(shù)據(jù),連接點位置.連接規(guī)則數(shù)組是存放算子的邏輯關(guān)系以及最大,最小連接數(shù).

兩個算子連接,首先判斷兩算子是否相同,然后判斷目標(biāo)是否存在連線規(guī)則,如果沒有規(guī)則直接連接,否則根據(jù)目標(biāo)算子的連線規(guī)則中類型是否等于或者包含源算子的類型得到過濾后的連接規(guī)則數(shù)組,再判斷連接數(shù)量是否超出規(guī)定的最大或者最小連接數(shù),未超過則兩個算子完成連接,實現(xiàn)流程如圖7所示.兩個不同的算子連接如果不滿足規(guī)則不能連接,即設(shè)置連接點的透明度為0,不顯示連接點,如果滿足連接規(guī)則,設(shè)置連接點的透明度為1.

圖7 算子連接規(guī)則流程圖

元素path 的屬性d表示路徑數(shù)據(jù),即表示滿足連接規(guī)則的源算子和目標(biāo)算子的路徑數(shù)據(jù),d的值是一個“命令+參數(shù)”的序列,表現(xiàn)形式類似為(M10 10L20 20 40 50),M表示移動到點坐標(biāo),L表示連線到點坐標(biāo).算子連接需要明確是源算子的哪個連接點和目標(biāo)算子的哪個連接點連接,并且計算連接點在畫布上的X 軸和Y 軸的坐標(biāo),計算公式為源算子連接點X 軸坐標(biāo)等于源算子連接點的相對坐標(biāo)乘以寬度加上源算子的X 軸坐標(biāo),Y 軸和目標(biāo)算子連接點坐標(biāo)計算方法類似.為了避免連線被算子遮擋,連接線會出現(xiàn)一個拐點,該拐點的坐標(biāo)就是源算子連接點和目標(biāo)算子連接點的X 軸坐標(biāo)的最大值,Y 軸最大值,如果源算子和目標(biāo)算子在同一條直線上則拐點因為坐標(biāo)相同顯示直線,如圖8所示.

圖8 數(shù)據(jù)過程連接線

源算子指向目標(biāo)算子的連線,使用箭頭區(qū)分源算子和目標(biāo)算子.箭頭采用SVG 的元素polygon 繪制,屬性points 定義三角形每個角的X 軸和Y 軸坐標(biāo).箭頭的坐標(biāo)為目標(biāo)算子連接點的坐標(biāo),將直角坐標(biāo)轉(zhuǎn)化為極坐標(biāo),計算連接點的角度,并旋轉(zhuǎn)對應(yīng)的角度得到箭頭指向角度,效果圖如圖8所示.

4.2 數(shù)據(jù)構(gòu)建及傳遞

Vue 基于MVVM(model-view-ViewModel)[12]架構(gòu),在View 層的操作數(shù)據(jù)傳遞給ViewModel 層,Model 層隨之更新,ViewModel 層會根據(jù)Model 層的數(shù)據(jù)變化自動更新,重新渲染[13].本系統(tǒng)基于Vue 實現(xiàn),數(shù)據(jù)部分由JavaScript 實現(xiàn),不需要專門處理視圖層的HTML 節(jié)點,視圖的變化隨著數(shù)據(jù)變化,提高了性能和開發(fā)效率.比如實現(xiàn)數(shù)據(jù)過程需要構(gòu)建連線數(shù)組edgelist 和算子數(shù)組itemlist,視圖模版核心代碼如下所示:

算子數(shù)組itemlist 用來顯示在畫布上的算子,算子的所有屬性數(shù)據(jù)都在itemlist 數(shù)組中.Edgelist 數(shù)組對象包含自身的id,源算子id 和屬性from 對象,目標(biāo)算子id 和屬性to 對象,其中from 對象和to 對象分別包含源算子和目標(biāo)算子的所有屬性,坐標(biāo)以及連接點的相對位置坐標(biāo),數(shù)據(jù)結(jié)構(gòu)如圖9所示.＜path＞連線算法是根據(jù)edgelist 數(shù)組中源算子連接點的坐標(biāo)和目標(biāo)算子連接點的坐標(biāo)進行連線繪制.

圖9 Edgelist 數(shù)據(jù)結(jié)構(gòu)

本文系統(tǒng)的實現(xiàn)基于Vue 組件化機制,分為算子,畫布,屬性,導(dǎo)航和工具欄5 大組件.每個組件實例的作用域是獨立的,父組件的數(shù)據(jù)需要通過prop 傳遞給子組件,子組件需要通過emit 方法將數(shù)據(jù)傳遞給父組件.設(shè)置每個組件的唯一的ref 值,非父子關(guān)系的組件間通過調(diào)用組件的數(shù)據(jù)或者方法獲得,比如組件buttonbar 為工具欄組件,組件viewport 為畫布組件,分別設(shè)置組件ref 值,工具欄組件通過調(diào)用畫布組件得到連接線edgelist 數(shù)組,核心代碼示例如下:

＜buttonbar ref="buttonbar"

:edgelist="$refs.viewport.edgelist"＞

＜/buttonbar＞

＜viewport ref="viewport"＞＜/viewport＞

本文算子組件,畫布組件,屬性組件,導(dǎo)航組件和工具欄組件為非父子組件,各組件數(shù)據(jù)傳遞如圖10所示.

圖10 各組件數(shù)據(jù)傳遞圖

4.3 交互功能

為了提升用戶的交互體驗,數(shù)據(jù)過程的交互功能主要包括拖拽移動、放大或者縮小算子和導(dǎo)航.基于SVG 實現(xiàn)的數(shù)據(jù)過程,可以自由縮放,并不會影響圖片的失真.本系統(tǒng)通過鼠標(biāo)的滾輪mousewheel 事件實現(xiàn)放大或者縮小功能,并設(shè)置整個畫布縮放的最大和最小的值.通過鼠標(biāo)的mouseup 事件,mousedown 事件和mousemove 事件計算得到算子最終移動的坐標(biāo)位置來實現(xiàn)算子的拖拽移動.SVG 具有高擴展性,可直接使用Vue 的v-html 指令將畫布標(biāo)簽＜svg＞的所有數(shù)據(jù)顯示在頁面上,并設(shè)置成一定的縮放比例,使用鼠標(biāo)mousemove 事件移動位置來實現(xiàn)導(dǎo)航功能,效果圖如圖11所示.

圖11 導(dǎo)航效果圖

5 應(yīng)用效果評估

5.1 應(yīng)用平臺和數(shù)據(jù)集

本系統(tǒng)采用的硬件環(huán)境配置為Intel x86 處理器,128 GB 內(nèi)存,軟件運行平臺為CentOS 7.2 操作系統(tǒng).系統(tǒng)Web 客戶端運行平臺為64 位Windows 7 操作系統(tǒng),Chrome 81.0 瀏覽器.本系統(tǒng)驗證實驗采用了內(nèi)部不公開的數(shù)據(jù)集.該數(shù)據(jù)集包含200 個算子,每個算子包含至少10 個屬性字段,配置屬性至少含有20 個屬性字段.每個算子有4 個連接點,每個連接點可以連接其他符合規(guī)則的算子.

5.2 效果評估

為了驗證系統(tǒng)方案的有效性,分別從分辨率,響應(yīng)幀數(shù)FPS,擴展性,交互性,開發(fā)效率及功能完善度和現(xiàn)有方案做對比.

根據(jù)表3 看出,本系統(tǒng)方案和D3 庫不依賴于分辨率,任意縮放不會失真,而其他3 個方案都依賴于分辨率,任意縮放會失真.因為本方案和D3 庫使用SVG 繪制的矢量圖;G6 庫,ECharts 方案底層是Canvas 渲染的位圖.矢量圖不依賴于分辨率,任意縮放不失真,而位圖依賴于分辨率,任意縮放會失真.數(shù)據(jù)過程的性能主要通過算子拖拽,移動,連線操作的響應(yīng)時間來體現(xiàn).使用Chrome 瀏覽器提供的performance 工具中的FPS(每一秒的幀數(shù))指標(biāo)來測試對比本方案和現(xiàn)有方案的頁面動畫的性能指標(biāo).通過表2,從FPS 維度可以看出本方案,G6 庫和D3 庫在相同時間間隔的FPS 達(dá)到60 以上,說明未出現(xiàn)卡頓,用戶體驗良好.

表3 數(shù)據(jù)過程系統(tǒng)性能對比表

本系統(tǒng)方案和現(xiàn)有方案從多個維度的對比,從擴展性維度看出G6 庫和ECharts 庫因是商業(yè)產(chǎn)品不能二次開發(fā)擴展性差,導(dǎo)入Visio 圖方案不能對實時的算子數(shù)據(jù)進行修改擴展性差,D3 庫和本系統(tǒng)方案可以定制化開發(fā),更具有高擴展性.從交互性維度得出,除了導(dǎo)入Visio 圖方案和ECharts 庫外其他方案都有較高的交互性.從開發(fā)效率維度看,G6 庫每一次數(shù)據(jù)的更新都需要重新組裝數(shù)據(jù),D3 庫采用JQuery 庫開發(fā)代碼復(fù)雜且效率低,本系統(tǒng)方案基于Vue 庫的組件化和數(shù)據(jù)雙向綁定特點開發(fā),開發(fā)效率高.從功能完善程度對比得出G6 庫和ECharts 因是商業(yè)產(chǎn)品不能進行二次開發(fā),功能有限,D3 庫和本系統(tǒng)方案可以自主開發(fā)功能,功能完善度更高更容易把控.綜合來看本系統(tǒng)方案在分辨率,響應(yīng)幀數(shù),擴展性,交互性,開發(fā)效率和功能完善程度多個方面對比其他現(xiàn)有方案更具有優(yōu)勢,且能保證良好性能和豐富的用戶體驗.

6 總結(jié)

本文針對傳統(tǒng)數(shù)據(jù)過程系統(tǒng)無法動態(tài)地顯示數(shù)據(jù)過程及對數(shù)據(jù)過程中的算子無法進行拖拽編輯的問題,提出了一種基于SVG和Vue的數(shù)據(jù)過程可視化系統(tǒng)方案.該系統(tǒng)采用SVG 繪制元素,可以任意縮放,不依賴于分辨率,不會造成圖片像素的失真,并且SVG 可直接嵌套部分Element UI 組件庫使用,還可以直接使用Vue 的方法指令,具有擴展性強和高開發(fā)效率的特點.基于Vue 的組件化和數(shù)據(jù)雙向綁定特點,本系統(tǒng)方案實現(xiàn)不需要關(guān)注視圖HTML 節(jié)點的處理,只需要處理數(shù)據(jù)部分,采用虛擬DOM 來渲染頁面,不需要頻繁操作真實DOM,提高了開發(fā)效率同時保證了良好性能.