有不少朋友说学 D3 挺难的。为什么呢?想写一篇文章分析分析。
D3.js 是 Github 上的一个开源项目,用于数据可视化。作者是 Mike Bostock,纽约时报的工程师。现纽约时报上各种数据新闻的可视化图表,都是基于 D3 制作的。
数据新闻,是近年来十分热门的一个行业,在互联网新闻里,添加上生动的数据分析,以图形的形式展示,简单易懂。
数据新闻是随着大数据时代的潮流而出现。各公司和机构能掌握的数据越来越多,例如谷歌掌握了数以千万亿的搜索数据,沃尔玛掌握了全球的零售数据。如此大量的数据,在以前要处理是难以想象的,大部分数据或者没有保存下来,或者保存下来了也不受重视,因为数据太多处理不了。
但是,如今计算机的能力已大幅度提高,硬件基础不再成为问题,使用大数据来分析问题自然而然也成为了趋势,因此目前被称为大数据时代。关于大数据是什么,可参见我总结的文章:
【 大数据时代需要转变的思维 】
对于大量数据的处理中,有数据获取、数据分析、数据简化等等,还有数据可视化。数据可视化是将数据呈现给用户的方式。请问,你是看图像舒服,还是看一堆数字舒服?
D3 就是在这种趋势下诞生的。当然,与之一起诞生的可视化库还有很多,例如,processing.js、echarts等。但是,D3 绝对可称得上是该领域的佼佼者,关于各种 JavaScript 库流行度的分析,可阅读:
可视化的库有很多,基于 JavaScript 开发的库也有很多,D3 有什么优势呢?
(1)数据能够与 DOM 绑定在一起
D3 能够将数据与 DOM 绑定在一起,使得数据与图形成为一个整体,即图形中有数据、数据中有图形。那么在生成图形或更改图形时,就可以方便地根据数据进行操作,并且,当数据更改之后,也能简单地更改图形。
(2)数据转换和绘制是独立的
将数据变成图表,需要不少数学算法。很多可视化库的做法是:
提供一个函数 drawPie() ,输入数据,直接绘制出饼状图。
但 D3 的做法是:
提供一个函数 computePie(),可将数据转换成饼状图的数据,然后开发者可使用自己喜欢的方式来绘制饼状图。
虽然看起来 D3 使得问题变得麻烦了,但是在图表要求比较复杂的时候,直接绘制的饼状图往往达不到要求,细微的部分没有办法更改。而 D3 将两者分离开来,就极大地提高了自由度,以至于开发者甚至可以使用其他的图形库来显示 D3 计算的数据。
(3)代码简洁
JQuery 是网页开发中很常用的库,其中使用了链式语法,被很多人喜爱。D3 也采用了这一语法,能够一个函数套一个函数,使得代码很简洁。
(4)大量布局
饼状图、树形图、打包图、矩阵树图等等,D3 将大量复杂的算法封装成一个一个”布局“,用于转换数据。能够适用于各种图表的制作。
(5)基于SVG,缩放不会损失精度
SVG,是可缩放的矢量图形。D3 的绘制大部分是在 SVG 上绘制的,并且提供了大量的图形生成器,使得在 SVG 上生成图形变得简单。
另外,由于 SVG 是矢量图,放大缩小不会有精度损失。
D3 有那么多好处,那么,D3 难学吗?
我了解到,有不少朋友认为 D3 挺难学的。
我总结了一下,D3 难学的原因有三:
(1)官方文档写得不好
官网上提供了 API 的资料,还有大量的例子。但是,每个例子怎么做的只有代码,没有文字说明。API 虽有说明,但是也却没有太多函数的使用例子。这就使用初入门的人感觉头大。
(2)不容易适应数据转换和绘制分开的模式
一个函数,drawPie(),输入数据,输出绘制图形,一般人的思维模式是这样的。但是,D3 偏偏将两者分开了,分开之后能带来极大的自由度,但是也使得它变得有些难学。
(3)外语不好
对大部分国人来说,看英文文档还是挺头疼的。由于我比较熟练地掌握了日语,刚开始是阅读的日文资料,因此入门较易。中文资料应该说还是比较匮乏的,不过近期已有所改善。毕竟是比较新的东西,慢慢资料会多起来的。
D3 乍看上去,有些难学,但是一旦掌握了,就能适应各种图表的制作,自由度极大,功能极强。有人说,D3 就像是 Photoshop,其他的库就像是美图秀秀,前者需要一定的时间学习,学成后在图像处理上所向披靡,后者不需要学习时间,会和不会没有太大的价值。这么比喻可能有点夸张,我有一个更好的比喻(灵感来源自辜鸿铭先生的文章)。
D3 就像是写毛笔字,其他的可视化库就像是写钢笔字。钢笔字上手容易,下笔简单,快捷,写出来的东西叫做文章。毛笔字需要长期磨练,上手较难,但是一旦掌握了,便能行云流水,心随念想,可进可退,只在笔尖,写出来的东西叫做艺术。
谢谢阅读。
原文地址:http://blog.csdn.net/lzhlzz/article/details/45370361