绘图：以柱状图为例
要绘图，首要需要的是一块绘图的“画布”。
HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。
SVG 是什么
SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。
SVG 有如下特点：
-
SVG 绘制的是矢量图，因此对图像进行放大不会失真。
-
基于 XML，可以为每个元素添加 JavaScript 事件处理器。
-
每个图形均视为对象，更改对象的属性，图形也会改变。
-
不适合游戏应用。
Canvas
Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。
Canvas 有如下特点：
-
绘制的是位图，图像放大后会失真；
-
不支持事件处理器。
-
能够以 .png 或 .jpg 格式保存图像；
-
适合游戏应用
添加画布
D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。
使用 D3 在 body 元素中添加 svg 的代码如下：
var width = 300; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
有了画布，接下来就可以在画布上作图了。
绘制矩形
本文绘制一个横向的柱形图。只绘制矩形，不绘制文字和坐标轴。
在 SVG 中，矩形的元素标签是 rect。例如：
<svg>
<rect></rect>
<rect></rect>
</svg>
上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：
-
x：矩形左上角的 x 坐标；
-
y：矩形左上角的 y 坐标；
-
width：矩形的宽度；
-
height：矩形的高度；
要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。
现在给出一组数据，要对此进行可视化。数据如下：
var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //数据（表示矩形的宽度）
为简单起见，我们直接用数值的大小来表示矩形的像素宽度，然后，添加以下代码：
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return d;
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：
svg.selectAll("rect") //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
这段代码以后会常常出现在 D3 的代码中，请务必牢记。目前不深入讨论它的作用机制是怎样的，只需要读者牢记：
当有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素。
添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了 function(d, i)，前面已经讲过，d 代表与当前元素绑定的数据，i 代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。
最后一行的：
.attr("fill","steelblue");
是给矩形元素设置颜色。一般来说，最好写成外置 CSS 的形式，方便归类和修改。
比例尺
比例尺是 D3 中很重要的一个概念，为什么需要比例尺：
上一章制作了一个柱形图，当时有一个数组：
var dataset = [ 250 , 210 , 170 , 130 , 90 ];
绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。
此方式非常具有局限性，如果数值过大或过小，例如：
var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ];
对以上两个数组，绝不可能用 2.5 个像素来代表矩形的宽度，那样根本看不见；也不可能用 2500 个像素来代表矩形的宽度，因为画布没有那么长。
于是，我们需要一种计算关系，能够：
将某一区域的值映射到另一区域，其大小关系不变。
这就是比例尺（Scale）。
比例尺，很像数学中的函数。例如，对于一个一元二次函数，有 x 和 y 两个未知数，当 x 的值确定时，y 的值也就确定了。
在数学中，x 的范围被称为定义域，y 的范围被称为值域。
D3 中的比例尺，也有定义域和值域，分别被称为 domain 和 range。
开发者需要指定 domain 和 range 的范围，如此即可得到一个计算关系。
D3 提供了多种比例尺，下面介绍最常用的两种。
线性比例尺
线性比例尺，能将一个连续的区间，映射到另一区间。要解决柱形图宽度的问题，就需要线性比例尺。
假设有以下数组：
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
现有要求如下：
将 dataset 中最小的值，映射成 0；将最大的值，映射成 300。
代码如下：
var min = d3.min(dataset);
var max = d3.max(dataset);
var linear = d3.scale.linear()
.domain([min, max])
.range([0, 300]);
linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300
其中，d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。在这里还用到了两个函数，它们经常与比例尺一起出现：
-
d3.max()
-
d3.min()
这两个函数能够求数组的最大值和最小值，是 D3 提供的。按照以上代码，
-
比例尺的定义域 domain 为：[0.9, 3.3]；
-
比例尺的值域 range 为：[0, 300]
因此，当输入 0.9 时，返回 0；当输入 3.3 时，返回 300。当输入 2.3 时呢？返回 175，这是按照线性函数的规则计算的。
有一点请大家记住：
d3.scale.linear() 的返回值，是可以当做函数来使用的。因此，才有这样的用法：linear(0.9)。
序数比例尺
有时候，定义域和值域不一定是连续的。例如，有两个数组：
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
我们希望 0 对应颜色 red，1 对应 blue，依次类推。
但是，这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black
用法与线性比例尺是类似的。
给柱形图添加比例尺
<body>
<script src="d3/d3.js"></script>
<script>
var width = 300; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; //数据（表示矩形的宽度）
var linear = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect") //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
.attr("x",20)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return linear(d); //在这里用比例尺
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
</script>
</body>
- d3.scaleLinear()
文档：https://www.d3js.org.cn/document/d3-scale/#continuous-scales
坐标轴
坐标轴，是可视化图表中经常出现的一种图形，由一些列线段和刻度组成。**坐标轴在 SVG 中是没有现成的图形元素的，**需要用其他的元素组合构成。
D3 提供了坐标轴的组件，如此在 SVG 画布中绘制坐标轴变得像添加一个普通元素一样简单。
在 SVG 画布的预定义元素里，有六种基本图形：
- 矩形
- 圆形
- 椭圆
- 线段
- 折线
- 多边形
另外，还有一种比较特殊，也是功能最强的元素：
- 路径
画布中的所有图形，都是由以上七种元素组成。
显然，这里面没有坐标轴 这种元素。
因此，我们需要**用其他元素来组合成坐标轴，**最终使其变为类似以下的形式：
<g>
<!-- 第一个刻度 -->
<g>
<line></line> <!-- 第一个刻度的直线 -->
<text></text> <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line> <!-- 第二个刻度的直线 -->
<text></text> <!-- 第二个刻度的文字 -->
</g>
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>
分组元素 ，是 SVG 画布中的元素，意思是 group。此元素是将其他元素进行组合的容器，在这里是用于将坐标轴的其他元素分组存放。
D3 提供了一个组件：d3-axis。它为我们完成了以上工作。
文档：https://www.d3js.org.cn/document/d3-axis/#installing
上一章提到了比例尺的概念，要生成坐标轴，需要用到比例尺，它们二者经常是一起使用的。
下面，在上一章的数据和比例尺的基础上，添加一个坐标轴的组件。
//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var axis = d3.axisBottom() //使用给定的 scale 构建一个刻度在下的坐标轴生成器
.scale(linear) //指定比例尺
.ticks(7); //指定刻度的数量
在 SVG 中添加坐标轴
定义了坐标轴之后，只需要在 SVG 中添加一个分组元素 ，再将坐标轴的其他元素添加到这个 里即可。代码如下：
svg.append("g")
.call(axis);
上面有一个 call() 函数，其参数是前面定义的坐标轴 axis。
在 D3 中，call() 的参数是一个函数。调用之后，将当前的选择集作为参数传递给此函数。
也就是说，以下两段代码是相等的。
function foo(selection) {
selection
.attr("name1", "value1")
.attr("name2", "value2");
}
foo(d3.selectAll("div"))
等价于：
d3.selectAll("div").call(foo);
设定坐标轴的样式和位置
默认的坐标轴样式不太美观，下面提供一个常见的样式：
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
分别定义了类 axis 下的 path、line、text 元素的样式。接下来，只需要将坐标轴的类设定为 axis 即可。
坐标轴的位置，可以通过 transform 属性来设定。
通常在添加元素的时候就一并设定，写成如下形式：
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis);
完成代码：
<body>
<script src="d3/d3.js"></script>
<script>
var width = 300; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ]; //数据（表示矩形的宽度）
//定义比例尺
var linear = d3.scaleLinear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
var axis = d3.axisBottom() //使用给定的 scale 构建一个刻度在下的坐标轴生成器
.scale(linear) //指定比例尺
.ticks(7); //指定刻度的数量
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect") //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
.attr("x",20)
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return linear(d); //在这里用比例尺
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis);
</script>
</body>
完整的柱形图
一个完整的柱形图包含三部分：矩形、文字、坐标轴。本章将对前几章的内容进行综合的运用，制作一个实用的柱形图，内容包括：选择集、数据绑定、比例尺、坐标轴等内容。
<body>
<div class="MyRect"></div>
<script src="d3/d3.js"></script>
<script>
var width = 500; //画布的宽度
var height = 500; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
//画布周边的空白，避免将图形绘制到边界上
var padding = {left:30, right:30, top:20, bottom:20};
var dataset = [10, 20, 30, 40, 33, 24, 12, 5]; //数据（表示矩形的宽度）
//定义x比例尺
var xScale = d3.scaleBand()
.domain(d3.range(dataset.length))
.rangeRound([0, width - padding.left - padding.right]);
//y轴的比例尺
var yScale = d3.scaleLinear()
.domain([0,d3.max(dataset)])
.range([height - padding.top - padding.bottom, 0]);
//定义x轴
var xAxis = d3.axisBottom(xScale) //使用给定的 scale 构建一个刻度在下的坐标轴生成器
//定义y轴
var yAxis = d3.axisLeft(yScale)
//矩形之间的空白
var rectPadding = 4; //每个矩形所占的像素高度(包括空白)
//添加矩形元素
var rects = svg.selectAll(".MyRect")
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
.attr("class","MyRect")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x",function(d,i){
return (xScale.bandwidth() + xScale.paddingInner()) * i
})
.attr("y",function(d){
return yScale(d);
})
.attr("width",xScale.bandwidth() - rectPadding)
.attr("height",function(d){
return height - padding.top - padding.bottom - yScale(d);
})
.attr('fill', 'green');
//添加文字元素
var texts = svg.selectAll(".MyText")
.data(dataset)
.enter()
.append("text")
.attr("class","MyText")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return (xScale.bandwidth() + xScale.paddingInner()) * i
} )
.attr("y",function(d){
return yScale(d);
})
.attr("dx",function(){
return (xScale.bandwidth() - rectPadding)/2;
})
.attr("dy",function(d){
return 20;
})
.text(function(d){
return d;
});
//添加x轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//添加y轴
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
svg
.selectAll('rect')
.on("mouseover",function(d,i){
d3.select(this)
.transition()
.duration(100)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","green");
});
</script>
</body>
D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。
上一章中，柱状图有动态效果，这就是一种动态图表。动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置等，而且用户是可以看到变化的过程的。
例如，有一个圆，圆心为 (100, 100)。现在我们希望圆的 x 坐标从 100 移到 300，并且移动过程在 2 秒的时间内发生。
这种时候就需要用到动态效果，在 D3 里我们称之为过渡（transition）。
实现动态的方法
D3 提供了 4 个方法用于实现图形的过渡：从状态 A 变为状态 B。
transition():启动过渡效果
其前后是图形变化前后的状态（形状、位置、颜色等等），例如：
.attr("fill","red") //初始颜色为红色
.transition() //启动过渡
.attr("fill","steelblue") //终止颜色为铁蓝色
D3 会自动对两种颜色（红色和铁蓝色）之间的颜色值（RGB值）进行插值计算，得到过渡用的颜色值。
duration()
指定过渡的持续时间，单位为毫秒。
如 duration(2000) ，指持续 2000 毫秒，即 2 秒。
ease()
指定过渡的方式，常用的有：
- linear：普通的线性变化
- circle：慢慢地到达变换的最终状态
- elastic：带有弹跳的到达最终状态
- bounce：在最终状态处弹跳几次
调用时，格式形如： ease(“bounce”)。
delay()
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。
此函数可以对整体指定延迟，也可以对个别指定延迟。
例如，对整体指定时：
.transition()
.duration(1000)
.delay(500)
图形整体在延迟 500 毫秒后发生变化，变化的时长为 1000 毫秒。过渡的总时长为1500毫秒。
又如，对一个一个的图形（图形上绑定了数据）进行指定时：
.transition()
.duration(1000)
.delay(funtion(d,i){
return 200*i;
})
如此，假设有 10 个元素，那么第 1 个元素延迟 0 毫秒（因为 i = 0），第 2 个元素延迟 200 毫秒，第 3 个延迟 400 毫秒，依次类推….整个过渡的长度为 200 * 9 + 1000 = 2800 毫秒。
实现简单的动态效果
下面将在 SVG 画布里添加三个圆，圆出现之后，立即启动过渡效果。
第一个圆，要求移动 x 坐标。
var circle1 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
//在1秒（1000毫秒）内将圆心坐标由100变为300
circle1.transition()
.duration(1000)
.attr("cx", 300);
第二个圆，要求既移动 x 坐标，又改变颜色。
var circle2 = svg.append("circle")... //与第一个圆一样，省略部分代码
//在1.5秒（1500毫秒）内将圆心坐标由100变为300，
//将颜色从绿色变为红色
circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill","red");
第三个圆，要求既移动 x 坐标，又改变颜色，还改变半径。
var circle3 = svg.append("circle")... //与第一个圆一样，省略部分代码
//在2秒（2000毫秒）内将圆心坐标由100变为300
//将颜色从绿色变为红色
//将半径从45变成25
//过渡方式采用bounce（在终点处弹跳几次）
circle3.transition()
.duration(2000)
.ease("bounce")
.attr("cx", 300)
.style("fill","red")
.attr("r", 25);
对上一节中的柱状图添加动态效果：在添加文字元素和矩形元素的时候，启动过渡效果，让各柱形和文字缓慢升至目标高度，并且在目标处跳动几次。
https://www.d3js.org.cn/document/d3-transition/#installing
https://www.d3js.org.cn/document/d3-ease/#api-reference
.attr("y",function(d){
var min = yScale.domain()[0];
return yScale(min);
})
.transition()
.delay(function(d,i){
return i * 200
})
.duration(2000)
.ease(d3.easeBounce)
.attr("y",function(d){
return yScale(d)
})
效果如图所示：
818
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
