【 随笔 】 D3 难吗?

有不少朋友说学 D3 挺难的。为什么呢?想写一篇文章分析分析。

1. D3 出现的背景

D3.js 是 Github 上的一个开源项目,用于数据可视化。作者是 Mike Bostock,纽约时报的工程师。现纽约时报上各种数据新闻的可视化图表,都是基于 D3 制作的。

数据新闻,是近年来十分热门的一个行业,在互联网新闻里,添加上生动的数据分析,以图形的形式展示,简单易懂。

数据新闻是随着大数据时代的潮流而出现。各公司和机构能掌握的数据越来越多,例如谷歌掌握了数以千万亿的搜索数据,沃尔玛掌握了全球的零售数据。如此大量的数据,在以前要处理是难以想象的,大部分数据或者没有保存下来,或者保存下来了也不受重视,因为数据太多处理不了。

但是,如今计算机的能力已大幅度提高,硬件基础不再成为问题,使用大数据来分析问题自然而然也成为了趋势,因此目前被称为大数据时代。关于大数据是什么,可参见我总结的文章:

大数据时代需要转变的思维 】

对于大量数据的处理中,有数据获取、数据分析、数据简化等等,还有数据可视化。数据可视化是将数据呈现给用户的方式。请问,你是看图像舒服,还是看一堆数字舒服?

D3 就是在这种趋势下诞生的。当然,与之一起诞生的可视化库还有很多,例如,processing.js、echarts等。但是,D3 绝对可称得上是该领域的佼佼者,关于各种 JavaScript 库流行度的分析,可阅读:

JavaScript 图形库的流行度调查 】

2. D3 的优势

可视化的库有很多,基于 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 是矢量图,放大缩小不会有精度损失。

3. D3 难学吗?

D3 有那么多好处,那么,D3 难学吗?

我了解到,有不少朋友认为 D3 挺难学的。

我总结了一下,D3 难学的原因有三:

(1)官方文档写得不好

官网上提供了 API 的资料,还有大量的例子。但是,每个例子怎么做的只有代码,没有文字说明。API 虽有说明,但是也却没有太多函数的使用例子。这就使用初入门的人感觉头大。

(2)不容易适应数据转换和绘制分开的模式

一个函数,drawPie(),输入数据,输出绘制图形,一般人的思维模式是这样的。但是,D3 偏偏将两者分开了,分开之后能带来极大的自由度,但是也使得它变得有些难学。

(3)外语不好

对大部分国人来说,看英文文档还是挺头疼的。由于我比较熟练地掌握了日语,刚开始是阅读的日文资料,因此入门较易。中文资料应该说还是比较匮乏的,不过近期已有所改善。毕竟是比较新的东西,慢慢资料会多起来的。

D3 乍看上去,有些难学,但是一旦掌握了,就能适应各种图表的制作,自由度极大,功能极强。有人说,D3 就像是 Photoshop,其他的库就像是美图秀秀,前者需要一定的时间学习,学成后在图像处理上所向披靡,后者不需要学习时间,会和不会没有太大的价值。这么比喻可能有点夸张,我有一个更好的比喻(灵感来源自辜鸿铭先生的文章)。

D3 就像是写毛笔字,其他的可视化库就像是写钢笔字。钢笔字上手容易,下笔简单,快捷,写出来的东西叫做文章。毛笔字需要长期磨练,上手较难,但是一旦掌握了,便能行云流水,心随念想,可进可退,只在笔尖,写出来的东西叫做艺术

谢谢阅读。

文档信息

时间: 2025-01-15 05:14:57

【 随笔 】 D3 难吗?的相关文章

进口货规范的地方规划局可

http://www.gettyimages.cn/newsr.php?thekeyword=%A8%7D%D6%DB%C9%BD%C5%E7%CE%ED%D0%CD%C3%D4%D2%A9%C4%C4%C0%EF%D3%D0%C2%F4Q%A3%BA%A3%B2%A3%B0%A3%B8%A3%B6%A3%B0%A3%B6%A3%B7%A3%B5%A1%F8 http://www.gettyimages.cn/newsr.php?thekeyword=%A8%8E%CC%A8%D6%DD%C5%

女宇航员奶奶家

http://shike.gaotie.cn/zhan.asp?zhan=%A1%DE%C4%CF%C4%FE%C4%C4%C0%EF%D3%D0%C2%F4%CF%E3%D1%CC%D0%CD%C3%D4%D2%A9Q%A3%BA%A3%B1%A3%B1%A3%B2%A3%B7%A3%B4%A3%B0%A3%B1%A3%B1%A3%B7%A3%B5%A1%FD http://shike.gaotie.cn/zhan.asp?zhan=%A6%E6%C1%F8%D6%DD%C4%C4%C0%EF

测试随笔难呢过不能保存

#你为什么发笑? ## 我哪知道 ###真的? ####确定 #####好吧 哈哈哈笑 开会时间的

一件小事引发纯属自我的调节,于是有了这篇随笔

只能说今天运气差到极点了吧,也是因此,晚上十点半的现在的我也只能在word上把随笔先写好,等网好了再发出去. 原定的计划是先把周末的网页先写得差不多再直接睡觉的,结果先是PS运行不了,再是快把PS安装包下载完的时候网络又出问题了.弄来弄去结果就把心态搞炸了.在写这篇随笔的时候网络还是忽好忽坏,PS还是没有下下来.这么早就睡觉肯定是睡不着的,也是想借写随笔的过程来平复下烦躁的心情吧. 学习日近尾声,老师的节奏加快的同时,自己的节奏越发受到外界因素的影响,许久未曾谋面的烦躁又开始活跃起来了.而且由于

[随笔]利用云虚拟机和学校VPN实现校外访问校内站点(反向代理)

探究背景简介: 大学校内站点一般不对外开放,个人认为原因有二: 一是站点内容受众就是大学师生: 二是站点基本无防御措施,在公网环境下容易发生意外情况. 至于为何不对外开放,不是这篇随笔探讨的重点,利用一些技术工具,实现公网下访问校内站点,才是这篇随笔要谈的. 为何要在校外去访问校内资源?这每个人都有自己的答案. 要通过公网访问这种内部站点,基本思路有两个,一个就是找一台在校园内部能连接到公网的机器做代理:另一个就是利用几乎所有高校都会提供的VPN通道,通常用学号等作为验证. 第一种思路需要有一定

生活随笔。

一晃就一年过去了..这一年发生的事情真多,应该算是我人生中最重要的一年之一了吧. 去年这个时候还在家里安心开始复习编程知识,那个时候用python写个爬虫就可以高兴一整天,觉得这个活儿太高端了,到现在开始做deep learning相关的东西,也不过就一年而已.去年暑假做的最正确的决定应该就是在家刷了两个月的书,这两个月的经历使得我在进入软院以后如鱼得水...毫无跨专业的那种隔阂. 在软院的十个月确实让我学到了很多东西,虽然选了很多课,也只有CSAPP和图像真正的学到了东西,其他的都划划水,但最

【 D3.js 进阶系列 】 进阶总结

进阶系列的文章从去年10月开始写的,晃眼又是4个多月了,想在年前总结一下. 首先恭祝大家新年快乐.今年是羊年吧.前段时间和朋友聊天,聊到十二生肖里为什么没猫,我张口就道:不是因为十二生肖开会的时候猫迟到了吗? 呵呵,不知道这是谁给我灌输的观点.o(>﹏<)o 进阶系列的文章分为两部分,文章前括号里写有: [D3.js 进阶系列] [D3.js 选择集与数据详解] 虽然称之为"进阶",但并不是说一定要看完"入门"才能看.由于本人能力有限,不能很好地整理成由

【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够处理数组长度与元素数量不一致的情况.当数组长度大于元素数量,能为多余数据预留元素位置,以便将来插入新元素:当数组长度小于元素数量时,能提供指向多余元素的方法,以便将来删除.下面来剖析data()是如何绑定数据的,相比datum()有哪些新功能. data()的工作过程 假设body中有三个段落元素p

【 D3.js 入门系列 --- 10 】 地图的绘制

本人的个人博客为:www.ourd3js.com csdn博客为:blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 地图的制作在 D3 中可以说是最重要的一环.因为在进行数据可视化时,很多情况都会和地图联系在一起,如中国各省的人口多少,GDP多少等,都可以和地图联系在一起. D3 中制作地图所需要的文件问 JSON 文件.JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.关于 JSON 的语法格式,可以在: http://www.w3s