本书以世界范围内最流行的可视化工具D3为主题,包含D3简介、Web前端基本知识、D3开发环境的构建、D3基础、D3学习主线,以及D3最新版本D3.js 4.0的知识。学习本书后,相信读者能在查询API的情况下完成数据可视化的工作。为使阅读尽量简单、易懂,本书附带非常丰富的插图。
本书在设计上希望让零基础的读者也能阅读,但这或许很难。读者也许需要至少掌握一门编程语言,例如C/C++、Java、JavaScript,并了解网页编写的基本知识。
新增D3.4x版本相关知识,大幅优化了内容、结构、描述方式,更简练、易学,是学习D3的必备教程
前 言
D3(Data-Driven Document)是一个用于数据可视化开发的JavaScript库,该项目托管于GitHub。GitHub是全世界最流行的代码托管平台,云集了来自世界各地的优秀工程师。D3自诞生以来,不断受到好评,其在GitHub的项目仓库排行榜上排名已高居第2位(2017年3月)。以一个可视化工具而言,能取得这种成就可谓奇迹。
使用者众多并不意味着一个工具一定好,但一定意味着它拥有更多的教程、示例代码、社区问答和出版物。D3由于其庞大的用户量,几乎已经成为数据可视化的代名词。
本书希望尽可能让零基础的读者也能阅读,但这或许很难。你也许需要至少掌握一门编程语言,例如C/C++、Java、JavaScript,并了解网页编写的基本知识。
学习本书后,相信读者能在查询API的情况下完成数据可视化的工作。为使阅读尽量简单、易懂,本书附带非常丰富的插图。用图而不用文字,这也正好符合可视化的追求。
如何阅读本书
读者现在正在阅读的,是《精通D3.js》的第2版,本书新增了D3 4.x的内容。
D3在网络上存在两个常用版本:3.x和4.x。
3.x经过长时间的发展,资料丰富,拥有大量的出版物,版本比较稳定,插件也较多。
4.x是新版本,采用了与3.x完全不同的模块化设计思维,功能也比3.x强大,但是目前资料相对较少,几乎没有出版物,社区解答的规模还没有形成。
本书希望既能结合3.x和4.x的内容,又不至于造成版本使用的混乱。
第1章至第3章:学习D3的预备知识。
第4章:D3的核心知识数据绑定,内容通用于3.x和4.x版本。
第5章至第13章:D3学习的主线,以3.x为基准,其内容也可作为4.x的参考。
第14章至第16章:D3 4.x的内容,包括升级方法、设计思想、新功能等。
根据读者的需求,笔者推荐您参考如下的阅读顺序。
1.零基础初学者
按顺序从第1章阅读到第16章即可,有不需要学习的章节可以自行跳过。
2.已经用过3.x,希望学习4.x的读者
阅读第4章、第14~16章的内容。第4章属于核心知识,可以用作复习,如果熟悉也可以不阅读。
3.仅希望用3.x的读者
阅读第4章至第13章。
运行环境
运行本书的示例,需要安装以下软件:
· Chrome、Firefox、Safari、Opera、Internet Explorer 9及更高版本;
· Apache HTTP Server或Ngnix等服务器软件(部分示例)。
排版约定
为使读者把握重点,本书将采用以下排版约定。
(1)正文中重要的词汇会使用加粗字体以示强调。
(2)重要的代码会以加粗字体表示强调,例如:
d3.selectAll("p").text("cat"); //普通代码
d3.selectAll("p").text("dog"); //重要代码
勘误信息
一本书要想完善,需要众多读者反馈错误。笔者虽想尽最大努力确保没有错误,但这却是很困难的。如果你发现书中的任何错误,小到错别字,大到代码无法运行等,希望能及时反馈给笔者。您的任何一次勘误,都会令笔者和其他读者受益。
与本书相关的最新动态请访问以下网站:
http://www.decembercafe.org/
勘误信息请发送邮件至:
phantomtyry@126.com
致谢
这是本书的第2版,在第1版的基础上修改和新增了很多内容。
感谢支持和购买本书第1版的读者,没有你们的帮助,本书不会有第2版。
感谢我的妻子,当我感到疲劳时,有她在身边总能让我感到安心。
感谢我的儿子,他是我最重要的精神支柱。
感谢本书的编辑付睿女士,她协助我完成本书的构思,并提出了很多建设性的意见。
读者服务
轻松注册成为博文视点社区用户(www.broadview.com.cn),扫码直达本书页面。
?下载资源:本书如提供示例代码及资源文件,均可在 下载资源 处下载。
?提交勘误:您对书中内容的修改意见可在 提交勘误 处提交,若被采纳,将获赠博文视点社区积分(在您购买电子书时,积分可用来抵扣相应金额)。
?交流互动:在页面下方 读者评论 处留下您的疑问或观点,与我们和其他读者一同学习交流。
页面入口:http://www.broadview.com.cn/31505
请问图书的源代码有人有吗?
吕老师 您好,我现在想要实现下图一样的图标,图上标出来的刻度差值不一样,显示出来的刻度长度确实一样的,这个是用什么样的比例尺实现的啊?不太会,D3.js这本书刚看了一部分了,有点搞不定,老师能给点建议吗?谢谢
p294,求与y轴的坐标我觉得完全没必要用zerov这个参数,costheta=(vec.y/norm(vec))就可以了,-1被抵消掉了,顺便请问norm的算法和具体格式,默认情况下p=2吗?既(a.x^2+a.y^2)^(1/2)
您好。
坐标轴的刻度是由比例尺决定的。你不能给一个坐标轴设定两个比例尺。
你可以用两个坐标轴,分别设定线性坐标和对数坐标。
然后在位置的安排上,让其首位相连即可。
谢谢。
吕老师,您好,我目前正在学习D3.JS,并购买了您这本书,在工作过程中遇到一个问题:我想实现一个坐轴前半部分为线性坐标,后半部分为对数的坐标。不知道D3.js能不支持这样的坐标轴。目前没有思路,想请您能给一个大概的思路吗?