最近以来,我使用d3进行我的可视化工具的开发已经3个月了,同时也兼用其他一些图表类库,自我感觉稍微有点心得。之前我也写过相关文章,我涉及的数据可视化的实现技术和工具,但是那篇文章对于项目开发而言太浅了。于是想写关于d3进行项目实战的系列文章,就像我之前的angularjs实战系列文章一样把整个开发过程中遇到的各种问题及解决办法梳理成章,以为留存。作为开篇,我还是想先把这段时间来我一直参考的资料做一个整理,并谈一些宏观的体会。

一.前方有坑,注意!

—————————————————————————————————————————————————————————————————

  1. 首先请注意d3的全称是叫做data driven documents,直译为数据驱动文档,是数据驱动的SVG图形编辑与交互制作的基础类库,而不是什么XX图表库。所以只是寻找简易图表类库直接拿来进行快速项目开发的童鞋,可以直接绕道了,d3不是你的菜,你应该去使用xcharts(基于d3做的图表类库)、echarts(百度的开源类库)、RGraph、highcharts(收费图表库)等等,这些才符合你高效制作图表的需要。而d3就留给那些需要高度定制化的交互图形的制作者用吧。
  2. 其次,SVG对IE低版本不兼容。还想兼容IE6,7,8的童鞋也可以绕道了。有研究如何兼容的功夫不如多花在跟客户、老板谈判上,是时候去锻炼一下谈判能力了。
  3. 第三,d3的学习曲线比较陡峭,要了解的东西比较多。首先是SVG的基本知识,然后至少会用一种SVG编辑器,比如Adobe Illustrator等等。之后,需要对javascript有比较深刻的了解,对于什么是数据驱动有自己的体会更好。所以,对于连PS不愿意学的纯程序员和填鸭速成的前端工程师而言,如果没有巨大利益驱动,那么还是不做为好。

二.为什么使用d3?

—————————————————————————————————————————————————————————————————

在数据可视化蓬勃发展的新时代,人们已不能满足于静态图片报表或者office excel生成的静态报表,而是需要包含各种交互功能的实时数据展现工具。这就决定了,在web开发领域,那种IE6,7,8时代残留的hacker方法,诸如图片替代和低效的VML方案,都已经过时。必须要使用诸如svg, html5 canvas, webGL这样的技术才能实时数据展现的要求。由于存在着实时交互的数据可视化功能的需求,故而使用这些新技术也是推进使用现代浏览器,摒弃过时的IE浏览器的好机会。

在这些新技术中,webGL还不是很成熟。html5 canvas和SVG则各有千秋,前者兼容性更强,后者开发成本更低。SVG本身是通用图形数据格式,什么放大缩小位移填充动画之类,全SVG属性就能搞定,并且SVG拥有很多设计工具,令这一通用格式在设计上也更为容易。CSS3标准的制定参考了很多SVG的内容,以至于在现代浏览器中,CSS3与SVG完美互补。以上特性决定了SVG很适合进行定制化的可视化工具开发。

在SVG相关的javascript类库中,d3是其翘楚。先不说它的demo如何如何绚丽,github上fork的人如何如何多,作为美国华盛顿大学开发的可视化工具项目,绝对有能力开发诸多应用。d3主推的数据驱动机制,其实与java社区中的对软件开发分层理解一致,对于前端程序员,如果使用过angularjs、emberjs 之类的框架,了解数据-视图双向绑定的机制,那么理解起d3的数据驱动也很容易。除此之外,D3帮助你屏蔽了浏览器差异,做出来图案的效果十分绚丽,可是代码却很简洁,并且在代码风格上近似于jquery的链式风格,很容易理解。如果确认自己的目标是要制作高度定制化的可视化工具,那么d3绝对是个好工具。

d3的成功案例太多,这里有两千多个先拿去看吧。

三.d3溯源

—————————————————————————————————————————————————————————————————

可能是喜欢看历史书的缘故,对于计算机各种程序的历史,我都很感兴趣并着意挖掘,因为一切技术都不是横空出世的,都是有着前期的各种积累,应运时代大潮而生。最早的浏览器netscape诞生于1994年,那时候的网页上只有一种交互操作——点击超链接然后跳转过去。然而随着人们的需求越来越高,网页与越来越多的技术相组合,如javascript, css, flash, svg等等,它们带来了越来越丰富的用户交互。早在上世纪末,人们便希望在网页上图形化地表现数据。D3js之前已经有一系列着眼于图形渲染的web技术,例如依托java开发的processing(2011), Prefuse(2005),依托flash开发的flare(2007),以及依托javascript开发的Protovis(2009)。2011年,斯坦福大学的Jeff Heer教授,博士生Mike Bostock,硕士生Vadim Ogievetsky在他们开发的SVG图形渲染类库Protovis的基础上,开发了开源新项目D3js,到现在已经是3.1.4版本了。

四.d3的定位

—————————————————————————————————————————————————————————————————

Processing.js
Raphaël
d3.js Google Charts
Highcharts

这里有必要补充一下d3这个类库的定位。在图形处理方面的javascript类库中,d3既不不像processing.js和raphael.js那样特别关注底层图形渲染,也不像google charts和highcharts那样主要是提供定制化的图表接口,而是处于中间层的位置:将dom操作方法封装,结合一套数据集合操作集,如此提供基于数据驱动实现图表的方法。查看到d3 API,我们可以看到其中提供的方法大部分是数据集合操作和html or svg dom操作,还有一批专门用于各种图形显示的布局方法。

jquery
prototype
backbone angular.js
ember.js

如果非要类比一下,我觉得d3.js有点类似于backbone.js在各种前端类库中的位置。backbone既不像jquery或者prototype那样关注于底层dom操作方法的实现,也不像angular和ember那样是一个MVC重型框架,而是处于中间的位置:只是将一套基于MVC数据封装结构结合着基于underscore的数据集操作方法提供给用户,以实现轻量级的、灵活性最大的前端MVC编程。

如果把最终追求替换成实现交互图表,最低追求替换成底层图形渲染,那么第二个表就可以完全被第一个表替换。所以我认为可以称d3为图形操作领域的轻量级框架。d3和backbone都是各自领域的轻量级框架,好处是灵活方便,同时还有很多已有的数据操作方法可用,但为此必然会付出更多的定制成本。好在d3的案例和学习资料很多,照瓢画葫芦并不是很难。

五.学习资料汇总:

—————————————————————————————————————————————————————————————————

最系统全面的培训教程,包含收费培训项目:

https://www.dashingd3js.com/d3-training

d3 wiki,包含介绍和API,必须参考的内容:(有部分汉化)

https://github.com/mbostock/d3/wiki

如果觉得内容太多,那么光看下面这本d3 cockbook,研究一下里面的例子,也可以速成,方便非深度玩家使用。

http://nickqizhu.github.io/d3-cookbook/

最后是一些书籍,都有在线版本可以直接查看。其中第一本有中文版,讲的很浅显,我有一本。

Safari Books Online has the content you need

Interactive Data Visualization for the Web shows you how to create and publish your own interactive data visualization projects on the Web – even if you have little or no experience with data visualization or web development. It’s easy and fun with this practical, hands-on introduction. Author Scott Murray teaches you the fundamental concepts and methods of D3, a JavaScript library that lets you express data visually in a web browser.
Developing a D3.js Edge D3 is a powerful framework for producing interactive data visualizations. Many examples created in the real world with D3, however, can best be described as “spaghetti code.” So, if you are interested in using D3 in a reusable and modular way, which is of course in line with modern development practices, then this book is for you!
Data Visualization with d3.js walks you through 20 examples. You can finally stop struggling to piece together examples you’ve found online. With this book, you will learn enough of the core concepts to conceive of and build your own visualizations from scratch.
It begins with the basics of putting lines on the screen, and builds on this foundation all the way to creating interactive animated visualizations using d3.js layouts.
Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript provides readers with a strong framework of principles for making well-conceived and well-crafted infographics, as well as detailed and practical instructions for how to really wield D3, the best tool for making web infographics available. An extended example is used in the book to explain how to put theory to practical use.

d3可视化实战00:d3的使用心得和学习资料汇总的更多相关文章

  1. d3可视化实战03:神奇的superformula

    需求驱动实现 前文讲过了D3的数据驱动机制,中间所举的例子都很简单.例如那个demo里面,绑定的数据是一个简单的数组,实现的图元也仅仅是一堆用SVG画的circle.但是现实世界中我们往往会遇到复杂的 ...

  2. d3可视化实战02:理解d3数据驱动的真正含义

    前文中已经提到,SVG从诞生之初起就可以非常方便地使用javascript脚本语言来进行其DOM对象的控制.当然,控制的方法有很多,有直接控制SVG对象的方法,例如使用原生js:有帮你封装一下图形接口 ...

  3. d3可视化实战04:事件绑定机制

    首先说明,d3支持所有的JS事件——甚至其他代码的自定义事件.这里有一个列表,The MDN Event Reference, 包含了几乎所有浏览器创建的事件类型.大家有需要可以去查看. D3的事件绑 ...

  4. d3可视化实战01:理解SVG元素特性

    一. SVG简介 ————————————————————————————————————————————————————————————————— SVG是一种和图像分辨率无关的矢量图形格式,它使用 ...

  5. 【RabbitMQ】2、心得总结,资料汇总

    Spring AMQP中文文档 http://ju.outofmemory.cn/entry/320538 云栖社区    https://yq.aliyun.com/search?q=rabbitm ...

  6. D3 数据可视化实战 笔记

    学习真是件奇妙的事情.这本书我之前都看过,有些的知识点却完全没有印象. 总结:把用到的知识好好研究:平时可以了解其他技术的基础,把相关的资料和难点记录下来. javascript陷阱 1.变量类型 v ...

  7. Pentaho6.1中D3可视化库的集成及数据联动的实现

    1.软件环境 操作系统版本:Win 10 64位 可视化图形库:D3 Pentaho版本: biserver-ce-6.1.0.1-196 2.对D3的简单介绍 D3允许你将任意的数据绑定到文档对象模 ...

  8. 数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

    习·D3.js 学习资源汇总 除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github ...

  9. 大数据时代的图表可视化利器——highcharts,D3和百度的echarts

    大数据时代的图表可视化利器——highcharts,D3和百度的echarts https://blog.csdn.net/minidrupal/article/details/42153941   ...

随机推荐

  1. LeetCode——Permutations

    Permutations Given a collection of numbers, return all possible permutations. For example,[1,2,3] ha ...

  2. top -Hp pid 显示所有的线程

    可以显示所有的线程 top -Hp pid [root@jiangyi01.sqa.zmf /home/ahao.mah] #top -Hp 41330 top - 22:49:40 up 27 da ...

  3. 鼠标事件之鼠标滑过事件MOUSEOVER

    来源地址:http://www.g2room.com/jquery/index.php?p=example%2Fevent%2Fmouseover.html&n=%E9%BC%A0%E6%A0 ...

  4. OpenRisc-41-or1200的cache模块分析

    引言 为CPU提供足够的,稳定的指令流和数据流是计算机体系结构设计中两个永恒的话题.为了给CPU提供指令流,需要设计分支预测机构,为了给CPU提供数据流,就需要设计cache了.其实,无论是insn还 ...

  5. WPS2012交叉引用技巧,word比wps这点强更新參考文献

                WPS2012交叉引用技巧,word比wps这点强更新參考文献 到时生成仅仅有有一条线,好像WPS不能够,word能够,假设谁知道能够补充.^_^ 1.写论文,參考文献的改动非 ...

  6. hadoop1.X安装

    1.      配置主机的名称 master,slave1,slave2 2.      安装JDK: 3.      配置IP与主机名称的映射: 192.168.0.100 master 192.1 ...

  7. 《UNIX网络编程》之select IO

    select 函数的原理 select 管理者 用select来管理多个IO 一旦其中的一个或者多个IO检测到我们所感兴趣的事件, select 函数返回,返回值为检测到的事件个数 然后,遍历事件,进 ...

  8. android的task任务栈

    转自http://blog.csdn.net/liuhe688/article/details/6761337 古人學問無遺力,少壯工夫老始成.紙上得來終覺淺,絕知此事要躬行.南宋.陸遊<冬夜讀 ...

  9. Linux用户磁盘配额

    一:内核中支持QUOTA: [root@localhost /]# grep  CONFIG_QUOTA /boot/config-3.10.0-123.el7.x86_64 CONFIG_QUOTA ...

  10. Tomcat相关目录及配置文件总结

    Tomcat根目录介绍      [bin]目录主要是用来存放tomcat的命令,主要有两大类,一类是以.sh结尾的(linux命令),另一类是以.bat结尾的(windows命令). 很多环境变量的 ...