碩士論文——基于d3技術與fiori框架的數(shù)據(jù)可視化功能研究與實現(xiàn)

1、<p>　　基于D3技術與Fiori框架的數(shù)據(jù)可視化功能研究與實現(xiàn)</p><p>　　摘 要：SAP的Fiori框架因為其良好的用戶體驗與交互，在近年的SAP軟件的開發(fā)中被越來越多的使用，但是Fiori框架本身缺乏了一些在實際的業(yè)務需求中不具備的展示功能，使得僅僅使用Fiori框架無法滿足特定的業(yè)務需求。而D3庫是經(jīng)典的數(shù)據(jù)可視化庫，如果可以將兩者很好的結(jié)合便可以使得很多數(shù)據(jù)可視化問題得以解決。本文

2、首先分析了Fiori框架本身以及D3庫的優(yōu)劣勢，然后詳細研究了Fiori框架與D3庫結(jié)合的可能性，最后在實際項目中實現(xiàn)了Fiori框架與D3庫的結(jié)合。</p><p>　　關鍵詞：Fiori框架；數(shù)據(jù)可視化；D3</p><p>　　Abstract: SThe Fiori frame was used more frequently for the great user experien

3、ce in recent years.However there are some limitations of the Fiori frame that it can not meet the requirement of the business.The Fiori frame can not make the data visualization great .However the D3 library is the class

4、ic library of data visualization, if the Fiori frame can combine the D3 library ,it can solve the problem of data visualization in the Fiori frame.At first, this paper analyzes the Fiori frame and the </p><p&g

5、t;　　Key words: Fiori frame; Data visualization ; D3 library</p><p>　　Fiori框架是由德國SAP公司推出的開發(fā)組件。這套開發(fā)組件采用了HTML5技術，用來構(gòu)建和適配客戶端程序的用戶接口。作為SAP使用的快速開發(fā)UI的技術框架，F(xiàn)iori具有有極好的性能。Fiori框架可以幫助快速的構(gòu)建企業(yè)級的JavaScript框架，并且由于其擁有超過360

6、個豐富的控件，豐富的CSS頁面展示模板，使得其在很多應用中得到使用。但是Fiori框架有著一定的封閉性，同時也不能覆蓋所有的業(yè)務需要。而經(jīng)典的D3（Data-Driven Documents：數(shù)據(jù)驅(qū)動文檔）庫，是基于數(shù)據(jù)的文檔操作庫，可以在一定程度上彌補Fiori框架的不足。D3能夠把數(shù)據(jù)和HTML、SVG、CSS結(jié)合起來，創(chuàng)造出可交互的各種圖表，對于數(shù)據(jù)的可視化有著極大的幫助。</p><p>　　本文討論了F

7、iori現(xiàn)有框架的優(yōu)勢與劣勢，同時研究D3庫中存在但在Fiori框架中沒有實現(xiàn)的可視化工具，在此基礎上提出了將D3庫與現(xiàn)有的Fiori框架相結(jié)合的設計方案。</p><p><b>　　1 D3技術的特性</b></p><p>　　D3是一種在數(shù)據(jù)文檔JavaScripte庫基礎上開發(fā)的可視化數(shù)據(jù)處理技術，通過將數(shù)據(jù)與HTML、SVG和CSS相結(jié)合，使原本的數(shù)據(jù)可以

8、通過不同的方式展現(xiàn)出來，從而保證了數(shù)據(jù)的具象化，可視化。</p><p><b>　　1.1 便利性</b></p><p>　　D3.js采用的是鏈式語法，極大的方便了對庫中函數(shù)方法的調(diào)用。例如：d3.select(“#vistable”).style(“color”，white) 通過連續(xù)的引用D3所定義的函數(shù)方便的選中了指定的元素并且為其添加了新的屬性。D3并不

9、是一個新的圖形展示庫，不同于Processing，Raphael或者Protovis，標記詞匯表是直接來源于Web標準的。如果瀏覽器的廠家在未來引入新的特性，不需要等到庫更新，便可以第一時間使用最新的特性。更重要的是，D3可以很容易的使用瀏覽器內(nèi)置的元素審查器進行調(diào)試，因為D3操作的節(jié)點就是瀏覽器原生支持的節(jié)點。</p><p><b>　　1.2高效性</b></p><

10、;p>　　D3不是一個整體的數(shù)據(jù)處理框架，理論上并不具備對數(shù)據(jù)的全面處理能力，其解決問題的關鍵在于基于數(shù)據(jù)文件的高效操作。使用WEB標準的功能例如CSS3，HTML5和SVG，可以通過最小的開銷，獲得非?？斓乃俣?。</p><p>　　在常見的二維數(shù)據(jù)表中，數(shù)據(jù)信息之間的關系并不立體，很多關系被忽視，利用D3可以從海量數(shù)據(jù)中總結(jié)出數(shù)據(jù)之間的關系網(wǎng)絡，通過圖形的形式可視化的呈現(xiàn)出來，保證數(shù)據(jù)信息之間的關系能夠

11、充分體現(xiàn)。</p><p><b>　　1.3自由度高 </b></p><p>　　D3支持多種數(shù)據(jù)的格式，包括JSON、XML、CSV、HTML等。雖然由于在使用PHP語言時，數(shù)組可以很簡單的轉(zhuǎn)換為JSON格式，JSON格式的數(shù)據(jù)被更多的使用，但是理論上D3對于數(shù)據(jù)的類型沒有嚴格的要求。D3內(nèi)置了一個功能強大的內(nèi)建布局，叫做Force-Directed Graph

12、（受力導向圖）[5]。受力導向圖布局模擬了一些基本的物理粒子原理，比如重力，引力和斥力，并且可以調(diào)節(jié)力的大小和受力距離，因此在其內(nèi)部的操作具有極高的自由度。</p><p><b>　　1.4適用性高</b></p><p>　　D3利用的SVG是基于可擴展標記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是國際互聯(lián)網(wǎng)標準組織（World Wide Web

13、 Consortium,W3C）在2000年8月制定的規(guī)范的網(wǎng)絡矢量圖形標準。SVG嚴格遵從XML語法[6]，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關的矢量圖形格式。同時SVG完全支持DOM(Document Object Model文檔對象模型)，DOM可以允許程序或者腳本動態(tài)的存儲和上傳文件的內(nèi)容、結(jié)構(gòu)或者樣式。因此SVG文檔可以通過一致的接口和外界的程序進行交互。</p><p>

14、　　同時各大瀏覽器廠商最新版本的瀏覽器基本都支持SVG。因此采用依賴于SVG的D3可以使得程序的適用性得到提高。</p><p>　　2 Fiori框架的優(yōu)劣勢</p><p>　　Fiori框架是SAP公司開發(fā)的一套整體框架，這套框架的開發(fā)初衷在于更新SAP的ERP系統(tǒng)的界面。但是由于SAP公司并不是一家專門的開發(fā)UI的公司，所以必然有其不足之處。Fiori框架的后臺數(shù)據(jù)依靠CDSVIE

15、W提供，并且通過ODATA的數(shù)據(jù)模式暴露出來。前臺使用SAP UI5的庫，形成前臺所需要的UI。同時Fiori中包含了很多smart control控件，可以方便的綁定ODATA Model，形成數(shù)據(jù)交互。</p><p>　　2.1 Fiori框架的優(yōu)勢</p><p>　　Fiori框架作為UI的框架，其軟件的整體架構(gòu)包括HANA Database、CDS View、ODATA Se

16、rvice以及Fiori。如圖1所示。</p><p>　　圖1 SAP 軟件架構(gòu)圖</p><p>　　傳統(tǒng)的SAP 軟件架構(gòu)如下：</p><p>　　最底層是SAP的HANA數(shù)據(jù)庫，為所有程序提供單一的數(shù)據(jù)源。</p><p>　　在數(shù)據(jù)庫上面一層是CDS View，通過對HANA數(shù)據(jù)庫中的表進行搜索，并且通過特定的語意標識來實現(xiàn)一定的

17、業(yè)務邏輯。由于CDS View是直接從HANA數(shù)據(jù)庫直接讀取數(shù)據(jù)，所以速度是較快的，因此盡量在這一層處理邏輯，從而達到最好的性能。</p><p>　　在CDS View直接從HANA數(shù)據(jù)庫讀到數(shù)據(jù)并且實現(xiàn)了部分邏輯后，暴露出ODATA Service,為最上層提供數(shù)據(jù)。Fiori 框架在得到ODATA Service后，利用獲取的數(shù)據(jù)形成前臺。并且通過綁定ODATA的模型，可以方便的使用在Fiori框架中已經(jīng)

18、定義過的Smart系列控件，達到與后臺數(shù)據(jù)的交互。</p><p>　　2.2 Fiori框架存在的問題</p><p>　　Fiori框架是基于SAP UI5框架的，有很多包裝好的方便使用的控件，但是也因此失去了一些靈活性。沒有很多可以定制的空間，使得當出現(xiàn)了Fiori框架沒有定制的控件時，不得不使用替代方案，無法達到最佳效果。</p><p>　　在使用Fior

19、i框架的同時，想要可以實現(xiàn)更好的數(shù)據(jù)可視化，就可以借助外部的數(shù)據(jù)可視化庫，但是在使兩者結(jié)合時，會有以下的問題：</p><p>　?。?）Fiori框架中，利用XML文件來定義界面，并通過JS文件來進行控制，但是在D3中是完全是用JS來實現(xiàn)的各種數(shù)據(jù)可視化，中間存在差異。</p><p>　?。?）D3庫雖然支持各種數(shù)據(jù)模式，但是并不支持Fiori最常使用的ODATA的數(shù)據(jù)模式。因此需要將

20、ODATA的數(shù)據(jù)類型轉(zhuǎn)化為D3所使用的數(shù)據(jù)類型。</p><p>　?。?）由于Fiori后臺使用的是CDSView所以有部分邏輯無法實現(xiàn)，需要在前端添加額外的邏輯，包括對數(shù)據(jù)的重新組合，使其符合要求。</p><p>　　3 改進的Fiori框架可視化策略</p><p>　　針對目前Fiori框架的這些可視化方面的問題，如果等待Fiori框架的團隊來解決，顯然無

21、法快速方便實現(xiàn)。所以，本文提出了一種定制化的Fiori框架的可視化策略，使Fiori項目中可以展現(xiàn)出利潤樹這種財務業(yè)務中非常常見的數(shù)據(jù)可視化工具。</p><p>　　3.1 改進的Fiori框架工作流程</p><p>　　改進的Fiori框架將可以利用D3的可視化功能，其主要工作流程如圖2所示。</p><p>　　圖2 改進的HTTP摘要流程圖</p&g

22、t;<p>　　改進的Fiori框架的工作步驟如下：</p><p>　　前端向服務器發(fā)起一個數(shù)據(jù)請求。這個數(shù)據(jù)請求包括了利潤分析所需要的信息，包括項目名稱，數(shù)據(jù)報表結(jié)構(gòu)等。</p><p>　　服務器得到前臺的請求后，根據(jù)請求在HANA數(shù)據(jù)庫中獲得對應的數(shù)據(jù)并且返回ODATA類型的數(shù)據(jù)。</p><p>　　前端獲得了后臺返回的ODATA類型的數(shù)據(jù)后

23、，首先將ODATA類型的數(shù)據(jù)轉(zhuǎn)化為需要的JSON類型。</p><p>　　在轉(zhuǎn)化為JSON格式的數(shù)據(jù)后，需要對數(shù)據(jù)進行進一步的處理。首先對所有數(shù)據(jù)進行分類，利用數(shù)據(jù)中的Fixedstructureitem字段，將所有數(shù)據(jù)分為收入與支出兩種。然后對每種類型的數(shù)據(jù)，進行層級結(jié)構(gòu)的連接。由于后臺的CDSView無法處理層級結(jié)構(gòu)，所以返回的僅僅是平面的結(jié)構(gòu)，需要在前臺將各個數(shù)據(jù)連接起來。由于后臺返回的數(shù)據(jù)中沒有最終利潤

24、樹中需要的合計的收入和支出的結(jié)果，所以需要根據(jù)上一步的分類，在數(shù)據(jù)結(jié)果集中加入剩下的合計的數(shù)據(jù)。最后，在所有運算結(jié)束后，將數(shù)據(jù)再次整理為，D3繪制樹形圖所需要的JSON格式，也就是將所有數(shù)據(jù)整合到同一個tree-josn中。</p><p>　　在使用D3前，需要給D3注冊一個元素。在Fiori對應JS文件的XML文件中，使用Fiori中的core類，仿照HTML中的寫法，定義出一塊div元素。</p>

25、;<p>　　在XML文件對應的JS文件中，利用D3.select函數(shù)獲取定義的元素。由于D3利用了SVG的技術，所以需要在獲取的元素上面append一個SVG的對象。</p><p>　　在得到SVG對象后，需要對其屬性進行設置，包括高度、寬度，并且調(diào)用zoom對象設置其屬性。利用D3中內(nèi)置的基本的tree對象，利用已經(jīng)準備好的tree-json中的數(shù)據(jù)，根據(jù)其中的層級結(jié)構(gòu)，遞歸創(chuàng)建出基本的節(jié)點。

26、同時設置對應的節(jié)點的點擊事件，以及動態(tài)的漸變效果。最終形成一棵利潤樹。</p><p>　　為了實現(xiàn)與Fiori其它控件的聯(lián)動，例如與條形圖的聯(lián)動，選中條形圖的同時，需要對選中的條形圖中的對象進行獲取，提取其中的標準信息，重新構(gòu)造tree-json。并且在刷新時首先判斷div元素中內(nèi)容是否為空。若為空，調(diào)用div對象的empty方法將其清空，重新繪制利潤樹。</p><p>　　3.2 改

27、進的Fiori框架分析</p><p>　　改進的Fiori框架是基于傳統(tǒng)的Fiori框架，因此繼承了傳統(tǒng)的Fiori框架的優(yōu)點。同時又將D3這種可以很好的進行數(shù)據(jù)可視化的庫融了進來，彌補了傳統(tǒng)的Fiori框架在數(shù)據(jù)可視化方面的不足。在不破壞原有的Fiori架構(gòu)的同時，很好的解決了以下問題：</p><p>　　無法得到層級結(jié)構(gòu)的數(shù)據(jù)：傳統(tǒng)的Fiori框架的后臺數(shù)據(jù)是通過CDSView來提

28、供的。雖然CDSView有很多很好的特性，包括速度快，可以通過語義注釋來幫助形成前臺界面，但是CDSView有著自身的局限性就是無法處理層級結(jié)構(gòu)并且無法處理遞歸。在改進的Fiori框架中，通過在前臺獲取到后臺的數(shù)據(jù)，在前臺進行了對層級結(jié)構(gòu)的處理，使得層級機構(gòu)的數(shù)據(jù)可以正確的顯示。</p><p>　　無法合理的實現(xiàn)數(shù)據(jù)可視化：傳統(tǒng)的Fiori框架中根據(jù)SAP UI5庫來定義各種控件，雖然有很大的便利，但是在數(shù)據(jù)可

29、視化方面，沒有專門為數(shù)據(jù)可視化服務的D3功能強大。合理的將Fiori框架和D3相結(jié)合，很好的解決了Fiori框架的在數(shù)據(jù)可視化方面的不足。</p><p><b>　　4方案實現(xiàn)與驗證</b></p><p>　　為實現(xiàn)改進的Fiori框架，需要使用到D3中的幾個關鍵方法。方案是基于SAP EASI（Embedded Analytics enabled by Sema

30、ntic Infrastructure）項目實現(xiàn)的。</p><p>　　4.1 D3中的關鍵方法</p><p>　　d3.select:從當前文檔中選擇出一些列元素，只有選定了元素才能有后面的動作。</p><p>　　d3.attr:設置或獲取指定屬性，在JS中由于屬性也可以是方法，所以經(jīng)常通過D3.attr這個方法來處理一些事件。</p>&l

31、t;p>　　selection.append:創(chuàng)建并添加新元素到選定元素后，通過不斷的在選擇的元素后面添加新的元素將其慢慢擴展成最終的可視化樹。</p><p>　　tree.children:設置或者獲取子節(jié)點的訪問器，通過這個方法來處理節(jié)點之間的父子關系，從而形成層級關系。</p><p>　　tree.nodes:計算并返回指定節(jié)點的子節(jié)點的信息，通過該方法來生產(chǎn)組成樹的結(jié)點。

32、</p><p>　　tree.links:指定一個子節(jié)點組（通常是nodes函數(shù)返回值），計算它們與父節(jié)點的連接信息。</p><p>　　tree.nodeSize:給所有節(jié)點指定一個固定的大小。</p><p>　　Tree.separation:設置或獲取像個節(jié)點之間的間隔計算函數(shù)。</p><p>　　4.2 數(shù)據(jù)處理方法</

33、p><p>　　在獲得了JSON格式的數(shù)據(jù)后，需要對數(shù)據(jù)進行另外的邏輯處理。具體實現(xiàn)此處不進行討論，主要包括：</p><p>　　（1）遍歷數(shù)據(jù)集，對所有數(shù)據(jù)分類。</p><p>　?。?）根據(jù)選擇條件計算合計值。</p><p>　?。?）遞歸實現(xiàn)父子關系的結(jié)果字符串。</p><p><b>　　4.3

34、實驗結(jié)果</b></p><p>　　實驗結(jié)果如圖3所示，作為嵌入在Fiori框架中的利潤樹，充分利用了D3與Fiori的特性形成了如下的效果：</p><p><b>　　圖3 利潤樹 </b></p><p>　　同時也實現(xiàn)了與Fiori框架中的其他控件的聯(lián)動，如圖4所示：</p><p>　　圖4 篩選

35、后利潤樹 </p><p>　　其他控件進行條件篩選后，利用D3實現(xiàn)的利潤樹也同時進行的改變。實驗證明，基于D3的Fiori框架運作良好。</p><p><b>　　5 結(jié)束語</b></p><p>　　D3因為其簡單，高效并且強大的數(shù)據(jù)可視化功能，被廣泛的應用。本文分析了傳統(tǒng)的Fiori框架，并根據(jù)D3的相關文檔，設計了改進的Fiori框

36、架，并在實際項目中驗證了改進的Fiori框架的可行性。但是該框架由于在前臺處理了部分邏輯，對于如何保證其數(shù)據(jù)的安全性，如何提高數(shù)據(jù)處理的效率等問題還需要進一步研究</p><p><b>　　參考文獻</b></p><p>　　權(quán)慶樂, 連衛(wèi)民. 對可視化庫D3.js的應用研究[J]. 電子技術與軟件工程, 2014(18):203-203.</p>

37、<p>　　趙聰. 可視化庫D3.js的應用研究[J]. 信息技術與信息化, 2015(2):107-109.</p><p>　　汪正江, 曲家文. 使用Raphael庫動態(tài)操作SVG[J]. 軟件, 2014(11):45-47.</p><p>　　關迎暉, 向勇, 陳康. 基于Gephi的可視分析方法研究與應用[J]. 電信科學, 2013(S1):112-119.<

38、;/p><p>　　張運良, 張兆鋒, 張曉丹,等. 使用D3.js的知識組織系統(tǒng)Web動態(tài)交互可視化功能實現(xiàn)[J]. 現(xiàn)代圖書情報技術, 2013(Z1):127-131.</p><p>　　賴曉文, 陳啟鑫, 夏清,等. 基于SVG技術的電力系統(tǒng)可視化平臺集成與方法庫開發(fā)[J]. 電力系統(tǒng)自動化, 2012, 36(16):76-81.李學杰，金志剛，戴居豐. 基于HTTP摘要認證的SI