1. 如果你不懂svg，请参考这里：http://www.w3school.com.cn/svg/index.asp
柱形图是一种最简单的可视化图标，主要有矩形、文字标签、坐标轴组成。本文为简单起见，只绘制矩形的部分，用以讲解如何使用 D3 在 SVG 画布中绘图。
前几章的处理对象都是 HTML 的文字，没有涉及图形的制作。
要绘图，首要需要的是一块绘图的“画布”。
HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。
SVG，指可缩放矢量图形（Scalable Vector Graphics），是用于描述二维矢量图形的一种图形格式，是由万维网联盟制定的开放标准。SVG 使用 XML 格式来定义图形，除了 IE8 之前的版本外，绝大部分浏览器都支持 SVG，可将 SVG 文本直接嵌入 HTML 中显示。
SVG 有如下特点：
SVG 绘制的是矢量图，因此对图像进行放大不会失真。基于 XML，可以为每个元素添加 JavaScript 事件处理器。每个图形均视为对象，更改对象的属性，图形也会改变。不适合游戏应用。Canvas 是通过 JavaScript 来绘制 2D 图形，是 HTML 5 中新增的元素。
Canvas 有如下特点：
绘制的是位图，图像放大后会失真。不支持事件处理器。能够以 .png 或 .jpg 格式保存图像适合游戏应用D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。
请看demo和注释:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../libs/d3.min.js" charset="utf-8"></script> </head> <body> </body> </html> <script> var width = 300; //画布的宽度 var height = 300; //画布的高度 var svg = d3.select("body") //选择文档中的body元素 .append("svg") //添加一个svg元素 .attr("width", width) //设定宽度 .attr("height", height) //设定高度 .attr("id","mySvg"); //设置id属性 var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //数据（表示矩形的宽度） 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 d; }) .attr("height",rectHeight-2) .style("fill","steelblue"); /*var body = d3.select("body"); body.append("p","#mySvg").text("1111");*/ </script>关于d3.attr
一个可以处理很多情况的函数，当只传入一个参数时，如果是string，则返回该属性值，如果是对象，则遍历设置对象的键值对属性值，如果参数大于等于2，则是普通的设置样式:
var node = d3.select('body')node.attr('class') > 返回该属性值node.attr('class', 'haha') > 设置该属性值node.attr({'class': 'haha', 'x': '10'}) > 设置该属性值那么怎么做到一个函数处理多种情况，很明显是根据参数的数量来区别对待：
d3_selectionPrototype.attr = function(name, value) { if (arguments.length < 2) { if (typeof name === "string") { var node = this.node(); name = d3.ns.qualify(name); return name.local ? node.getAttributeNS(name.space, name.local) : node.getAttribute(name); } for (value in name) this.each(d3_selection_attr(value, name[value])); return this; } return this.each(d3_selection_attr(name, value)); };关于getAttributeNS我们可以不用理会，对于web端，d3在设置和获取属性的时候用的都是getAttribute和setAttribute。对于d3_selection_attr函数，它返回一个通用函数，该函数会对当前对象设置对应的属性值：大概的思想:
function d3_selection_attr(name, value) { return function() { this.setAttribute(name, value); } }