十二月咖啡馆工作室

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

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

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

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

有时需要告诉用户地图上的一些目标，如果该目标是只需要一个坐标就能表示的，称其为“标注”。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

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

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

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

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

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