十二月咖啡馆工作室

前面各章节加起来，文章总数已有22篇，对于D3.js的入门来说已经足够了，特此总结。

经常有朋友问哪里有关于 D3 的比较好的学习资料，现整理成此文。以后找到更多更好的，会不断更新本文。

快过年了，春节的气氛开始慢慢起来了吧。估计在春节期间大家没时间学习了吧，O(∩_∩)O~，春节还是要好好地和家人在一起才是。故此，特制作了一个小作品，在年前供大家一乐，过去的一年辛苦了。o(>﹏<)o

进阶系列的文章从去年10月开始写的，晃眼又是4个多月了，想在年前总结一下。

在【选择集与数据 - 4】一文中，介绍了一个update、enter、exit的处理模板，这个模板很常用，本文将通过一个例子来讲解其使用方法。

data() 函数有两个参数，第一个是被绑定数据，第二个参数用于指定绑定的顺序。在数据需要更新的时候常常会用到。

D3 中绑定数据大多是由 data() 函数来完成的，它是怎样工作的，它与 datum() 有什么区别呢？

缩放（Zoom）是另一种重要的可视化操作，主要是使用鼠标的滚轮进行。

拖拽（Drag）是交互式中很重要的一种，本文将讲解拖拽的使用方法。

本例呈现一个旋转的地球仪，数据使用的是世界地图简化后的文件：world_605kb.json。完整代码可见：http://www.ourd3js.com/map/demo/worldmap_sphere/worldmap.html文档信息版权声明：署名（BY）-非商业性（NC）-禁止演绎（ND）发表日期：2014 年 12 月 11 日更多内容：OUR D3.JS - 数据可视化专题站 和 CSD

在 SVG 绘制区域中作图，在绘制直线和曲线时，常需要在某处添加箭头。本文介绍如何在 D3 中给直线和曲线添加箭头。 到目前为止，我们绘制 D3 的图表都是在 SVG 绘制区域内，虽然 D3 也可用 Canvas 或 WebGL 等作图，但 SVG 是最常用的。那么，用 D3 来绘制箭头，先要明白在 SVG 中是怎么绘制的。1. 在 SVG 中定义箭头的标识定义箭头的标识如下，先写一对 ，里面再

花了点时间整理了世界地图和各主要国家的 JSON 地图文件，以备将来使用。世界地图： world.json美洲：美国：USA.json加拿大：Canada.json巴西：Brazil.json大洋洲：澳大利亚：Australia.json新西兰：NewZealand.json亚洲：印度：India.json日本：Japan.json俄罗斯:Russia.json新加坡：Singapore.json

2014年可以说是 JavaScript 最风光的一年，成为上升最快的语言，在 Github 上最受关注的前10个仓库中，有7个是基于 JavaScript 开发的，数不胜数的函数库可适应于各种需求。那么，在可视化图形库方面，最受关注的有哪些呢？1. 编程语言排行榜数据来源于 TIOBE，前六名是我们都耳熟能详的语言：C、Java、C++、PHP等，JavaScript排名第 7，上升率最大。排在

选择集和数据的关系是 D3 最重要的基础，在【入门 - 第 7 章】时进行过些许讲解，对于要掌握好 D3 是远远不够的。故此开设一个新的分类，专门讨论选择集与数据的关系，包括数据绑定的使用和工作原理，update 、enter、exit 的原理和使用方法等，接下来一段时间里会有多篇此类文章。

分区图的布局比较简单，本章介绍一下分区图的参数。分区图布局为：d3.layout.partition()其函数有6个。nodes()将根数据传入后，得到的节点的数组，每个节点添加8个参数：parent - 父节点children - 子节点value - 表示节点的大小，由下面 value() 函数指定的值，父节点的值等于子节点值的和depth - 节点的深度x - 节点的x方向的坐标（不一定指x

很多朋友在找中国各省具体到市县级的 JSON 地图文件，这些天承蒙朋友帮助，总算找到了。我花了一些时间对格式做了简化，总算是整理好了，希望分享给大家。各省份的地图整理如下，各文件能够直接在 【入门 - 第 10 章】介绍的例子中运行，改个文件名即可。本文件由上官真心网友提供，感激不尽。中国：china.json安徽：anhui.json北京：beijing.json重庆：chongqing.jso

在 SVG 中添加文本是使用 text 元素。但是，这个元素不能够自动换行，超出的部分就显示不出来了，怎么办呢？

数据可视化作为大数据应用的一个分支，随着大数据时代的到来得到了飞速发展。各种各样的开发库如雨后春笋般出现，单是前端方向就不下百种。D3.js无疑是此中翘楚，是在世界范围内最受广泛认可的前端可视化工具，Github上的排名就是有利的佐证。我最早接触D3是在2013年，距离D3发布仅仅两年，是我到日本留学的第二年。在一门叫做项目演习的课程上，四人的一组在三个月内需要完成一件作品。我被组长分配的任务是做

2014 年 11 月，电子工业出版社的编辑找到我，说希望写一本关于 D3.js 的书。其后，经过 6 个月的撰写和 3 个月的修订，近期已经正式发售。这段经历，令我有很多比学习技术本身更珍贵的感悟。特此撰文，希望能把这一段经历的前因后果、以及我的想法分享给大家。

本教程共包含 6 个视频，目的是为了帮助初学者快速入门，以便阅读本站其他文章。本教程的名称为“飞速入门”，是为初学者准备的，其中包括了 D3 开发中最基础的知识。对 D3 掌握得较好的朋友不必观看本教程。本系列的具体内容如下，点击标题即可进入百度云页面观看。如果百度云网盘的在线播放中出现清晰度不足的情况，请下载后再观看。1. 第一个D3程序D3的简介和安装、服务器软件的安装、初学者应注意的问题、一

一般来说，图表中不宜存在过多文字。但是，有时需要一些文字来描述某些图形元素。那么，可以实现一种交互：当用户鼠标滑到某图形元素时，出现一个提示框，里面写有描述文字。这是一种简单、普遍的交互式，几乎适用于所有图表。通过可给提示框定制外观，能给用户带来很好的体验。1. 提示框的制作思路提示框，就是“文字”加“边框”。显示文字，一般来说用 SVG 的，但是，有两个问题：如果字符串过长，元素不能自动换行，虽

有时候，需要在地图上绘制连线，表示“从某处到某处”的意思，这种时候在地图上绘制的连线，称为“标线”。

高级系列的教程已经完结，特此总结。月初的时候曾说过本月内完结高级教程，今天是最后一天，算是可以交差了。O(∩_∩)O~如此一来，【入门】-【进阶】-【高级】三个系列的教程算是完成了。本教程的目的在于提供一个网络的、免费的学习系列，希望大家能喜欢。在写文章的过程中，笔者对于 D3.js 的理解也在逐步加深。因此，写在前面的文章一定比后面的文章要差，虽然部分经过了修改，但是还没有系统性修正的时间。现在

思维导图的节点具有层级关系和隶属关系，很像枝叶从树干伸展开来的形状。在前面讲解布局的时候，提到有五个布局是由层级布局扩展来的，其中的树状图（tree layout）和集群图（cluster layout）布局制作出来的图具有“树形”。因此，可以凭借这两种布局来制作思维导图。

有时需要告诉用户地图上的一些目标，如果该目标是只需要一个坐标就能表示的，称其为“标注”。1. 标注是什么标注，是指地图上只需要一个坐标即可表示的元素。例如，在经纬度(116, 39)处画一个圆，在(108, 30)处画一个符号，这些都属于标注，也可以将标注理解为“点元素”。我们知道，只知道经纬度是不能直接在地图上作图的，需要先用投影函数将其转换成像素坐标。例如，如果要在中国地图上标出“北京”的位置

在【入门 - 第 10 章】作了一张中国地图，其中各省份的颜色值都是随意赋值的。如果要将一些值反映在地图上，可以利用颜色的变化来表示值的变化。1. 思路例如，有值域的范围为：[10, 500]现希望10用浅绿表示，500用深绿表示，10到500之间的值用浅绿和深绿之间的颜色表示。显然，此处需要一个函数，传入的参数是10到500之间的值，返回值是浅绿到深绿之间的颜色值。【高级 - 第 5.1 章】介

颜色插值指的是给出两个 RGB 颜色值，两个颜色之间的值通过插值函数计算得到。线性渐变是添加到 SVG 图形上的过滤器，只需给出两端的颜色值即可。1. 颜色插值在【高级 - 第 5.0 章】里已经提到了颜色插值，在这里做一个例子。先定义颜色插值函数如下，var a = d3.rgb(255,0,0); //红色var b = d3.rgb(0,255,0); //绿色 var compute

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

颜色是作图不可少的概念，常用的标准有 RGB 和 HSL，D3 提供了创建颜色对象的方法，能够相互转换和插值。RGB色彩模式是通过对红（Red）、绿（Green）、蓝（Blue）三个颜色通道相互叠加来得到各式各样的颜色。三个通道的值的范围都为0~255，因此总共能表示16777216(256 * 256 * 256)种，即一千六百多万种。几乎包括了人类所能识别的所有颜色，是最广泛也是最容易理解的颜

矩阵树图（Treemap），也是层级布局的扩展，根据数据将区域划分为矩形的集合。矩形的大小和颜色，都是数据的反映。

在【高级 - 第 1.0 章】中讲解了在 SVG 中如何配合使用 text 和 tspan 来实现换行的功能，本文对此功能进行一下封装，以后就可以直接用了。

堆栈图布局（Stack Layout）能够计算二维数组每一数据层的基线，以方便将各数据层叠加起来。本文讲解堆栈图的制作方法。

绑定数据之后，选择集分为三部分：update、enter、exit。这三部分的处理办法是什么呢？本文将讲解其处理方法，以及一个常用的处理模板。1. enter的处理方法如果没有足够的元素，那么处理方法通常是使用append()添加元素。请看下面的代码： var dataset = [3, 6, 9]; var p = d3.select("body").selectAll("

直方图用于描述概率分布，D3 提供了直方图的布局 Histogram 用于转换数据。

本文讲解稍微复杂一些的拖拽应用，即拖拽饼图的各部分。

本章介绍如何用 D3 做一个饼状图。初始数据是几个整数，用 Layout 将这几个整数转换成饼状图使用的数据。

在上一节中使用了一个很重要的概念 — scale （这个不知道翻译成什么，暂且叫它比例）。本节将重点介绍它的相关使用方法。

本节学习用 D3 制作地图的方法。需要用到 GeoJSON 文件，这个文件的获取比较困难，我花了一些时间制作好了，希望能与大家分享。本文使用中国地图的数据进行绘制。

这一节学习树状图的制作。树状图的制作和集群图完全相同，经过这两种 layout 转换后的数据也很相似。

本节介绍打包图（ pack ）的制作过程，和前面几节一样，使用 D3 提供 layout 来转换数据，并进行绘制。