| 目 录 | |
|---|---|
| 1 | 什么是画布 |
| 2 | D3中使用Canvas |
| 3 | D3中使用SVG |
| 4 | 小结 |
上节中，介绍了D3.js的基本概念，其中突出了一点其可视化功能十分强大，可以很方便与汪回介绍的SVG结合使用，本节将会重点讲解一些结合的例子。
1.什么是画布？
要绘图，首要需要的是一块绘图的“画布”。
HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。
2.D3中使用Canvas
Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。
Canvas 有如下特点：
- 绘制的是位图，图像放大后会失真。
- 不支持事件处理器。
- 能够以 .png 或 .jpg 格式保存图像
- 适合游戏应用
3.D3中使用SVG
SVG 是什么
SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。 SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。
SVG 有如下特点:
- SVG 绘制的是矢量图，因此对图像进行放大不会失真。
- 基于 XML，可以为每个元素添加 JavaScript 事件处理器。
- 每个图形均视为对象，更改对象的属性，图形也会改变。
- 不适合游戏应用。
添加画布
D3 提供了很多的 SVG 图形的生成器，由于它们只支持 SVG 。所以，这里我建议使用 SVG 画布，但是并不是其他的不能用。
var width = 300; //画布的宽度
var height = 400; //画布的高度
var svg = d3.select("#svgbody") //选择文档中的id='svgbody'的div元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
这样我们的画布就做好啦。接下来我们将在画布上画些东西了，简单起见，这里就介绍绘制矩形的基本方法，其他图形可以借鉴汪回写的SVG技术博客的内容。
<svg>
<rect></rect>
<rect></rect>
</svg>
上面的 rect 里没有矩形的属性。矩形的属性，常用的有四个：
- x：矩形左上角的 x 坐标
- y：矩形左上角的 y 坐标
- width：矩形的宽度
- height：矩形的高度
要注意，在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。
现在我们实现D3简介中的可视化数据。数据如下：
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","blue");
这段代码添加了与 dataset 数组的长度相同数量的矩形，所使用的语句是：
svg.selectAll("rect") //选择svg内所有的矩形
.data(dataset) //绑定数组
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
有数据，而没有足够图形元素的时候，使用此方法可以添加足够的元素
添加了元素之后，就需要分别给各元素的属性赋值。在这里用到了 function(d, i)，d 代表与当前元素绑定的数据，i 代表索引号。给属性赋值的时候，是需要用到被绑定的数据，以及索引号的。
最后一行的attr("fill","blue")用来给矩形添加颜色属性，一般来说我们可以写成css属性，方便查找和修改。
4.小结
本文主要介绍了在D3中如何使用SVG，并做了简单的举例。这里可以和汪回的SVG基本介绍结合使用，画出一些复杂的图形。