D3.js在数据可视化中的应用以及注意事项

行云流水2016

谈起数据可视化项目，无法忽视图表的重要性，人们通过各种类型的图表来直观地表达数据背后的意义和故事。

技术人员也在产品/项目开发中，通过各种图表引擎（框架）来实现图表的制作和渲染。目前常见的框架有：echarts、Hicharts、Charts.js以及图表引擎的”开山鼻祖“——D3.js。

什么是D3.js ？

D3.js顾名思义，由3个首字母为D的单词（Data-Driven Documents，数据驱动的文档）组成，是一个JavaScript库，它可以通过数据来操作文档。D3可以通过使用HTML、SVG和CSS把数据鲜活形象地展现出来。

为什么使用D3.js ?

D3严格遵循Web标准，因而可以让你的程序轻松兼容现代主流浏览器并避免对特定框架的依赖。它提供了强大的可视化组件，可以让使用者以数据驱动的方式去操作DOM。D3 有极高的灵活性，它是一个比较基础的可视化 js 库，api 和 jQuery 很像，可以把数据和 HTML 结构或者 SVG 文档对应起来。D3 有丰富的数学函数来处理数据转换和物理计算，它擅长于操作 SVG 中的路径 (path) 和几何图形 (circle, ellipse, rect...)。

壹看板为什么要使用D3.js进行可视化开发?

Echarts是一个免费的，功能强大的制图和可视化库。提供一个简单的方法来实现添加直观的，互动的的图表。它是用纯JavaScript和基于zrender（H5 canvas类库），一个全新的轻巧canvas库。 Echarts上手容易，中文API相当完善，调用方式简单，而且图表样式美观，调用百度地图也是非常快捷。

但是，echarts更像是快餐，它能够满足我们基本的需求，比如饿了，我们可以吃饱，但对于口味刁钻的人，echarts就很难满足了。简单来说，echarts在高度定制化方面并不灵活。你不可能进了肯德基，去点一道糖醋鲤鱼，对吧。而d3呢，就像你自家的厨房，准备好食材，你可以随心所欲的去做你想吃的菜。

对于咱们的壹看板来说，也有诸如多维度多度量的智通表达、筛选/格式化的人性化交互、颜色/刻度/网络的表现、同数据源之间的图表联动等个性化的问题，是echarts所不能满足的，而这也是促使我们向d3转变的根本原因。

理解D3.js的模式

操作对象：数据集合 + 图片集合，

操作名称： 进入，更新，退出。

Enter(进入)：选择出来没有绑定图片的数据

A:代表数据集合，就是需要可视化的数据；B:代表图形元素的集合，就是展示出的图形；

如上图所示，集合A中的阴影区部分表示了未被可视化的数据，enter操作的意义在于通过enter()函数返回一个集合，这个集合里面包含的就是没有被可是可视化的数据；这也就是我们数据化的第一部分操作，找到那些没有被可视化的数据；

Updata(更新)：选择已经绑定图片和数据的集合

如上图所示，阴影区域表示图像和数据集合的交集，也就是当前数据所对应的图形，通过data函数，可以选择出交集集合，然后对选择出的集合进行操作，对元素进行更新；

Exit(退出)：选择没有绑定数据的图片

图中的阴影表示没有关联任何数据的图形，为什么会有没有数据的图形，一般而言是从数据中删除了数据产生的。通过exit函数可以选择出没有关联任何数据的图形，可以调用相关函数更新或是删除。

D3作品赏析

D3.js除了满足常见的基本图表类型的制作，更满足复杂的、高度定制化的使用场景，可以说只要有合适结构数据就没有无法通过D3.js表现不出来的图表，高度的可定制性也许就是D3.js区别于其它框架的最根本区别吧。

接下来，附上一些通过D3.js实现的作品，供大家鉴赏。

多维度单度量柱状图

单维度多度量柱状图

多维度多度量柱状图

点击链接“云途壹看板”，体验自助式可视化分析工具！