画布
绘图的前提是有一张画布，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 画布。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>The Fifth</title>
</head>
<script src="../../../JS/d3.min.js"></script>
<body>
<script>
//添加一张画布
var width = 300;
var height = 300;
var svg = d3.select("body")//选择页面中的body元素
.append("svg")//添加一个svg元素
.attr("width",width)//设定宽度
.attr("height",height);//设定高度
//导入数据
var dataset = [20,85,10,15,39,46];
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");
svg.selectAll("rect")//选择svg内所有的矩形
.data(dataset)//绑定数组
.enter()//指定选择集的enter部分
.append("rect")//添加足够数量的矩形元素
.attr("fill","steelblue");
</script>
</body>
</html>
最后运行出来就是这个效果，但这还不是最终的效果
