数据可视化技术在Web中的研究及应用

刘长娥

摘要：数据可视化将大量数据映射成图形，从而以更加直观、清晰的表达方式传递数据信息。该文对Web应用领域中经常用到的几种典型的数据可视化组件进行了深入分析；在归纳总结这些典型组件优劣的基础上，详细描述了数据可视化库D3，并使用D3实现了某企业员工人物关系网的数据可视化。

关键词：数据可视化；Echarts；Highcharcs；D3.js

中图分类号：TF311 文献标识码：A 文章编号：1009-3044（2017）18-0007-02

随着大数据时代的蓬勃发展，每天都会产生海量数据，对数据的处理能力和使用仅仅通过单一的文本数据的表达方式和分析手段已经不能满足人们的要求。数据可视化技术应运而生，它以人们容易理解和接受的图形图像形式直观地把晦涩难懂的传统数据表达出来，极大地加快了人们对数据的吸收、消化能力，提高理解交互力度。

随着近年来Web应用的快速发展，数据可视化的范围和能力也在不断随着Web的应用而不断延伸，数据可视化技术应用于Web环境下，必然能够促进Web应用在传播大量数据、交互速度快等方面有更大的提升，成为目前Web应用领域开发的热点。

1 Web应用中数据可视化技术

Highcharts图表组件是一个JavaScript脚本编写的图表库，并且开源和免费。目前Highcharts5.0.7支持面积图、散点图、仪表图、雷达图、金字塔图等19种不同类型的图表。Highcharts适用于多种浏览器（包括IE6及以上、Chrome等），并支持对移动端浏览器操作。Highcharts是以SVG为底层绘图语言，它输出的图形是矢量图形，显示品质高。Highchans拥有完整的实例演示、功能介绍及详细的API文档，一般开发人员非常容易实现，但是，有限的图表类型及图表与用户交互性欠缺是Highcharts不能令人满意的方面。

Echarts是一个免费开源的可视化图表组件。Echarts利用轻量级Canvas类库ZRender绘制数据可视化图表。在处理大数据量和3D绘图方面，Echarts有明显优势。Echarts兼容所有主流的浏览器，包括：IE6及以上、FkeFox等，并对移动端的支持做了优化。目前，Echarts3.0拥有柱状图、矩形树图等19种不同类型的丰富图表，并且支持图与图之间的混搭。从技术看来看，Echarts无法改变图表的大小，只能缩放显示。此外，从学习成本来看，Echarts3.0在完善API文档及增加实例演示方面有了很大改进，但对于普通开发人员来说不够全面。

以上这些数据可视化组件都是在Web应用中经常用到，并且有一定用户基础的。虽然数据可视化技术有很多种，Web应用的类别、需求也不尽相同，但对于Web应用既要考虑当前需要，又要考虑对未来业务需求不断变化选择合适的数据可视化组件。下文是对数据可视化库D3相关技术的描述及D3在Web应用的实例分析。

2数据可视化工具D3的相关技术

D3是一种基于JavaScript库的可视化数据处理技术，代码开源。它允许绑定任意数据到DOM，然后将数据驱动转换应用到文档中，将数据通过使用HTML、SVG和CSS实现可视化展示。D3基于Web标准，兼容IE9及以上的所有主流浏览器，支持移动端的缩放和手势操作。D3支持多种数据文件的读取，如JSON、XML、CSV、HTML等。

D3采用了与网页开发常用的iQuery库相同的链式语法，代码简洁。

D3基于SVG，在任意缩放、旋转或改变形状时，图形清晰，同时就文件大小来说，SVG文件所需空间小。此外，基于D3提供了大量、丰富的图形生成器，在SVG上绘制图形亦将变得非常简单。

D3中，数据转换与绘制是相互独立的。一般来说，需要很多数学算法，才能够将数据变成绚丽多彩的图表。以绘制饼状图为例，一些数据可视化库会提供一个drawPie（）函数，导人初始数据，然后直接将饼状图绘制出来。D3提供函数一个com-putePie（）函数，先将初始数据转换成绘制饼状图所需的数据，然后开发者使用符合业务需求的方式来绘制饼状图。D3中将数据转换和绘制分开，在图表比较复杂的时候，极大地提高了自由度，甚至D3计算的数据可以使用其他的数据可视化工具来显示。

D3拥有丰富的布局，能够支持各种图表的制作。D3的布局有饼状图（Pie）、弦图（Chord）、力导向图（Force）、打包图（Pack）、分区图（Partition）等12个布局。此外，D3还提供了选择集（select和selectAll）、比例尺（scale）、geo、过渡效果（transi-tion）等丰富的可视化方法接口。

3 D3可视化在人物关系数据可视化中的应用

3.1人物关系数据的可视化研究

本文对人物关系数据的可视化研究是基于数据分析软件，它能够实现海量多源异构数据的集成接人、存储、分析等功能，支持批量处理、内存计算等计算模式、支持结构化、半结构化、非结构化数据混合存储，有效整合与利用数据资源。本文研究的人物关系网络的数据是基于某企业全体员工的信息，包括：部门、姓名、ID、职务、性别、房间号、座机分机号、照片等，并将人物关系网络数据存储在数据分析软件的底层支撑图数据库。本文对人物关系数据可视化的研究采用了D3内置的力导向图布局，其图形化的表现形式能够让企业员工更加直观、清晰地了解到企业内部的人员组织结构。

使用D3数据可视化庫对人物关系数据可视化是一个持续的过程。首先，由于可视化库D3是将内存中的数据进行可视化实现，因此要将具体的存储在数据分析软件底层支撑图数据库中某企业员工的基本数据信息加载到相关浏览器的工作空间中。这其中，某企业员工的基本数据源的JSON格式如下：

{“nodes”：[{“name”：“刘嫦娥”，“id”：“liuchange”，“gender”：“女”，“tel”：“5322”，“dept”：“人力资源处”，“loca”：“办公区1501”，“post”：“普通职工”，“image”：“images/people/liuchange.png”}]，“edges”：[{“source”：0，“target”：1，“relation”：“同事”}]}

然后就是将加载完成的数据绑定到相应的关联文档，定义数据信息与关系文档中的文档元素关联原则，确保这两组数据的有效连接，实现数据和图元的映射关系。本文的实例中，就是在最终网页显示中的可视化图表中应绑定某企业员工的基本数据源里的nodes和edges两组数据，即将数据信息与图表中节点及连线相对应。与此同时整个可视化图表中有两类的元素：存在于可视化图表中的元素和数据可视化展示过程中的后台系统设计参数。其中，可视化图表中的元素主要包括节点、关系连线、节点文本及节点间关系的文本，同时基于这类元素数据，更加直观地显示了最终的可视化结果。数据可视化展示过程中的后台系统设计参数包括画布大小、展示数据可视化图形实际区域大小以及关键后台系统参数信息。数据可视化展示过程中的后台系统设计参数信息的存在，使得数据可视化图形信息的真实性和准确性有了极大地提高。

3.2应用结果分析

某企业员工人物关系数据可视化界面如图1所示。

在界面左侧的图形中，展示的是某企业人物关系网络图。同时基于这一图形，单击其中某一位员工照片，即可查找出与这位员工相关的人物关系网络图，显示在界面的右下角，同时这位员工的基本信息显示在界面的右上角。可视化图形的制作和应用能够最大限度地展现出企业人物关系网络、员工基本信息及相关人物关系网络图，为企业管理人员对企业内部组织结构的管理、企业整体运行的状态、员工信息资源深层次挖掘提供了可靠依据。

4结束语

本文在总结了Web应用领域中经常用到的几种典型的数据可视化技术的基础上，对可视化库D3的基本特性、D3可视化技术在人物关系数据可视化应用作了系统的介绍。采用了D3可视化技术后，图形化的表现形式使用户更加简单、清楚地了解到企业内员工与员工间信息，增强了直观性。endprint