硕士论文——基于D3技术与Fiori框架的数据可视化功能研究与实现

基于D3技术与Fiori框架的数据可视化功能研究与实现摘 要：SAP的Fiori框架因为其良好的用户体验与交互，在近年的SAP软件的开发中被越来越多的使用，但是Fiori框架本身缺乏了一些在实际的业务需求中不具备的展示功能，使得仅仅使用Fiori框架无法满足特定的业务需求。而D3库是经典的数据可视化库，如果可以将两者很好的结合便可以使得很多数据可视化问题得以解决。本文首先分析了Fiori框架本身以及D3库的优劣势，然后详细研究了Fiori框架与D3库结合的可能性，最后在实际项目中实现了Fiori框架与D3库的结合。关键词：Fiori框架；数据可视化；D3Abstract: SThe Fiori frame was used more frequently for the great user experience 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 classic 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 advantages and disadvantages of the Fiori frame and the D3 library.Then it discussed the possibility of combining the Fiori frame and the D3 library.At last, it realized the combination of the Fiori frame and the D3 library in the project.Key words: Fiori frame; Data visualization ; D3 libraryFiori框架是由德国SAP公司推出的开发组件。这套开发组件采用了HTML5技术，用来构建和适配客户端程序的用户接口。作为SAP使用的快速开发UI的技术框架，Fiori具有有极好的性能。Fiori框架可以帮助快速的构建企业级的JavaScript框架，并且由于其拥有超过360个丰富的控件，丰富的CSS页面展示模板，使得其在很多应用中得到使用。但是Fiori框架有着一定的封闭性，同时也不能覆盖所有的业务需要。而经典的D3（Data-Driven Documents：数据驱动文档）库，是基于数据的文档操作库，可以在一定程度上弥补Fiori框架的不足。D3能够把数据和HTML、SVG、CSS结合起来，创造出可交互的各种图表，对于数据的可视化有着极大的帮助。本文讨论了Fiori现有框架的优势与劣势，同时研究D3库中存在但在Fiori框架中没有实现的可视化工具，在此基础上提出了将D3库与现有的Fiori框架相结合的设计方案。1 D3技术的特性D3是一种在数据文档JavaScripte库基础上开发的可视化数据处理技术，通过将数据与HTML、SVG和CSS相结合，使原本的数据可以通过不同的方式展现出来，从而保证了数据的具象化，可视化。1.1 便利性D3.js采用的是链式语法，极大的方便了对库中函数方法的调用。例如：d3.select(“#vistable”).style(“color”，white) 通过连续的引用D3所定义的函数方便的选中了指定的元素并且为其添加了新的属性。D3并不是一个新的图形展示库，不同于Processing，Raphael或者Protovis，标记词汇表是直接来源于Web标准的。如果浏览器的厂家在未来引入新的特性，不需要等到库更新，便可以第一时间使用最新的特性。更重要的是，D3可以很容易的使用浏览器内置的元素审查器进行调试，因为D3操作的节点就是浏览器原生支持的节点。1.2高效性D3不是一个整体的数据处理框架，理论上并不具备对数据的全面处理能力，其解决问题的关键在于基于数据文件的高效操作。使用WEB标准的功能例如CSS3，HTML5和SVG，可以通过最小的开销，获得非常快的速度。在常见的二维数据表中，数据信息之间的关系并不立体，很多关系被忽视，利用D3可以从海量数据中总结出数据之间的关系网络，通过图形的形式可视化的呈现出来，保证数据信息之间的关系能够充分体现。1.3自由度高 D3支持多种数据的格式，包括JSON、XML、CSV、HTML等。虽然由于在使用PHP语言时，数组可以很简单的转换为JSON格式，JSON格式的数据被更多的使用，但是理论上D3对于数据的类型没有严格的要求。D3内置了一个功能强大的内建布局，叫做Force-Directed Graph（受力导向图）5。受力导向图布局模拟了一些基本的物理粒子原理，比如重力，引力和斥力，并且可以调节力的大小和受力距离，因此在其内部的操作具有极高的自由度。1.4适用性高 D3利用的SVG是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是国际互联网标准组织（World Wide Web Consortium,W3C）在2000年8月制定的规范的网络矢量图形标准。SVG严格遵从XML语法6，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。同时SVG完全支持DOM(Document Object Model文档对象模型)，DOM可以允许程序或者脚本动态的存储和上传文件的内容、结构或者样式。因此SVG文档可以通过一致的接口和外界的程序进行交互。同时各大浏览器厂商最新版本的浏览器基本都支持SVG。因此采用依赖于SVG的D3可以使得程序的适用性得到提高。2 Fiori框架的优劣势 Fiori框架是SAP公司开发的一套整体框架，这套框架的开发初衷在于更新SAP的ERP系统的界面。但是由于SAP公司并不是一家专门的开发UI的公司，所以必然有其不足之处。Fiori框架的后台数据依靠CDSVIEW提供，并且通过ODATA的数据模式暴露出来。前台使用SAP UI5的库，形成前台所需要的UI。同时Fiori中包含了很多smart control控件，可以方便的绑定ODATA Model，形成数据交互。2.1 Fiori框架的优势Fiori框架作为UI的框架，其软件的整体架构包括HANA Database、CDS View、ODATA Service以及Fiori。如图1所示。图1 SAP 软件架构图 传统的SAP 软件架构如下：(1) 最底层是SAP的HANA数据库，为所有程序提供单一的数据源。(2) 在数据库上面一层是CDS View，通过对HANA数据库中的表进行搜索，并且通过特定的语意标识来实现一定的业务逻辑。由于CDS View是直接从HANA数据库直接读取数据，所以速度是较快的，因此尽量在这一层处理逻辑，从而达到最好的性能。(3) 在CDS View直接从HANA数据库读到数据并且实现了部分逻辑后，暴露出ODATA Service,为最上层提供数据。Fiori 框架在得到ODATA Service后，利用获取的数据形成前台。并且通过绑定ODATA的模型，可以方便的使用在Fiori框架中已经定义过的Smart系列控件，达到与后台数据的交互。2.2 Fiori框架存在的问题Fiori框架是基于SAP UI5框架的，有很多包装好的方便使用的控件，但是也因此失去了一些灵活性。没有很多可以定制的空间，使得当出现了Fiori框架没有定制的控件时，不得不使用替代方案，无法达到最佳效果。在使用Fiori框架的同时，想要可以实现更好的数据可视化，就可以借助外部的数据可视化库，但是在使两者结合时，会有以下的问题： （1）Fiori框架中，利用XML文件来定义界面，并通过JS文件来进行控制，但是在D3中是完全是用JS来实现的各种数据可视化，中间存在差异。 （2）D3库虽然支持各种数据模式，但是并不支持Fiori最常使用的ODATA的数据模式。因此需要将ODATA的数据类型转化为D3所使用的数据类型。（3）由于Fiori后台使用的是CDSView所以有部分逻辑无法实现，需要在前端添加额外的逻辑，包括对数据的重新组合，使其符合要求。3 改进的Fiori框架可视化策略针对目前Fiori框架的这些可视化方面的问题，如果等待Fiori框架的团队来解决，显然无法快速方便实现。所以，本文提出了一种定制化的Fiori框架的可视化策略，使Fiori项目中可以展现出利润树这种财务业务中非常常见的数据可视化工具。3.1 改进的Fiori框架工作流程改进的Fiori框架将可以利用D3的可视化功能，其主要工作流程如图2所示。图2 改进的HTTP摘要流程图 改进的Fiori框架的工作步骤如下：(1) 前端向服务器发起一个数据请求。这个数据请求包括了利润分析所需要的信息，包括项目名称，数据报表结构等。(2) 服务器得到前台的请求后，根据请求在HANA数据库中获得对应的数据并且返回ODATA类型的数据。(3) 前端获得了后台返回的ODATA类型的数据后，首先将ODATA类型的数据转化为需要的JSON类型。(4) 在转化为JSON格式的数据后，需要对数据进行进一步的处理。首先对所有数据进行分类，利用数据中的Fixedstructureitem字段，将所有数据分为收入与支出两种。然后对每种类型的数据，进行层级结构的连接。由于后台的CDSView无法处理层级结构，所以返回的仅仅是平面的结构，需要在前台将各个数据连接起来。由于后台返回的数据中没有最终利润树中需要的合计的收入和支出的结果，所以需要根据上一步的分类，在数据结果集中加入剩下的合计的数据。最后，在所有运算结束后，将数据再次整理为，D3绘制树形图所需要的JSON格式，也就是将所有数据整合到同一个tree-josn中。(5) 在使用D3前，需要给D3注册一个元素。在Fiori对应JS文件的XML文件中，使用Fiori中的core类，仿照HTML中的写法，定义出一块div元素。(6) 在XML文件对应的JS文件中，利用D3.select函数获取定义的元素。由于D3利用了SVG的技术，所以需要在获取的元素上面append一个SVG的对象。(7) 在得到SVG对象后，需要对其属性进行设置，包括高度、宽度，并且调用zoom对象设置其属性。利用D3中内置的基本的tree对象，利用已经准备好的tree-json中的数据，根据其中的层级结构，递归创建出基本的节点。同时设置对应的节点的点击事件，以及动态的渐变效果。最终形成一棵利润树。(8) 为了实现与Fiori其它控件的联动，例如与条形图的联动，选中条形图的同时，需要对选中的条形图中的对象进行获取，提取其中的标准信息，重新构造tree-json。并且在刷新时首先判断div元素中内容是否为空。若为空，调用div对象的empty方法将其清空，重新绘制利润树。3.2 改进的Fiori框架分析改进的Fiori框架是基于传统的Fiori框架，因此继承了传统的Fiori框架的优点。同时又将D3这种可以很好的进行数据可视化的库融了进来，弥补了传统的Fiori框架在数据可视化方面的不足。在不破坏原有的Fiori架构的同时，很好的解决了以下问题：(1) 无法得到层级结构的数据：传统的Fiori框架的后台数据是通过CDSView来提供的。虽然CDSView有很多很好的特性，包括速度快，可以通过语义注释来帮助形成前台界面，但是CDSView有着自身的局限性就是无法处理层级结构并且无法处理递归。在改进的Fiori框架中，通过在前台获取到后台的数据，在前台进行了对层级结构的处理，使得层级机构的数据可以正确的显示。(2) 无法合理的实现数据可视化：传统的Fiori框架中根据SAP UI5库来定义各种控件，虽然有很大的便利，但是在数据可视化方面，没有专门为数据可视化服务的D3功能强大。合理的将Fiori框架和D3相结合，很好的解决了Fiori框架的在数据可视化方面的不足。4方案实现与验证为实现改进的Fiori框架，需要使用到D3中的几个关键方法。方案是基于SAP EASI（Embedded Analytics enabled by Semantic Infrastructure）项目实现的。4.1 D3中的关键方法d3.select:从当前文档中选择出一些列元素，只有选定了元素才能有后面的动作。d3.attr:设置或获取指定属性，在JS中由于属性也可以是方法，所以经常通过D3.attr这个方法来处理一些事件。selection.append:创建并添加新元素到选定元素后，通过不断的在选择的元素后面添加新的元素将其慢慢扩展成最终的可视化树。tree.children:设置或者获取子节点的访问器，通过这个方法来处理节点之间的父子关系，从而形成层级关系。tree.nodes:计算并返回指定节点的子节点的信息，通过该方法来生产组成树的结点。tree.links:指定一个子节点组（通常是nodes函数返回值），计算它们与父节点的连接信息。tree.nodeSize:给所有节点指定一个固定的大小。Tree.separation:设置或获取像个节点之间的间隔计算函数。4.2 数据处理方法在获得了JSON格式的数据后，需要对数据进行另外的逻辑处理。具体实现此处不进行讨论，主要包括： （1）遍历数据集，对所有数据分类。 （2）根据选择条件计算合计值。 （3）递归实现父子关系的结果字符串。4.3 实验结果实验结果如图3所示，作为嵌入在Fiori框架中的利润树，充分利用了D3与Fiori的特性形成了如下的效果：图3 利润树 同时也实现了与Fiori框架中的其他控