【 D3.js 入门系列 --- 3 】做一个简单的图表！

转载请注明出处，谢谢。

前面说了几节，都是对文字进行处理，这一节中将用 D3.js 做一个简单的柱形图。

做柱形图有非常多种方法，比方用 HTML 的 div 标签，或用 svg 。

推荐用 SVG 来做各种图形。

SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 使用 XML 格式定义图像，不清楚什么是SVG的朋友请先在 w3cschools 学习下，内容非常少，非常快就能掌握，不须要记住各种标签，仅仅要知道大概是什么即可，用的时候再查。

先看以下的代码：

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
<script>	
		var width = 600;
		var height = 600;
		var svg = d3.select("body").append("svg")
					   .attr("width",width)
					   .attr("height",height);
		
		var dataset = [ 30 , 20 , 45 , 12 , 21 ];
		
		svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x",10)
		   .attr("y",function(d,i){
				return i * 30;
		   })
		   .attr("width",function(d,i){
				return d * 10;
		   })
		   .attr("height",28)
		   .attr("fill","red");
		   
</script>

上面代码的结果例如以下图：

这样就做了一个柱形图。分析一下上面的代码：

第3-4行：定义两个变量，分别表示 SVG 绘制领域的宽和高。

第5-7行：表示选择 body 后，在 body 里插入 svg 。用 attr 来给 svg 加入属性。

用 attr 加入属性的效果类似于在 HTML 中给<a>元素加入属性 href 。

第9行：是要使用的数据。

第11行：表示在 svg 中选择全部的 rect 元素，可是实际上这时候 svg 中还不存在 rect 元素。这是 D3 一个比較特殊的地方，即它可以选择一个空集。先不要吃惊，请看第13行。

第12行：表示将数据绑定要这个 svg 上。

第13行： enter 表示当所须要的元素（这里为 rect ）比绑定的数据集合的元素（这里为 dataset ）少时，自己主动加入位置。使得与数据集合的数量一样多。这里非常重要。

第14行：紧接上一行。 append 元素 rect 。11-14行常常一起出现。要注意。

第15-27行：设定 rect 元素的各项属性，如位置，长短，颜色等。

上面的柱形图，对于每一个柱柱都是手动设定的长度，实际运用中我们经常希望给定一个最大值，让柱柱自己主动依据这个最大值调整百分比，显示出来，怎么办呢？插入例如以下代码：

var wx = d3.scale.linear()
		        .domain([0,d3.max(dataset)])
                .range([0,500]);

d3.scale.linear() 用于生成一个线性的可缩放的尺度，它的初始 domain 为 [ 0 , 1 ] ，初始 range 为 [ 0 , 1 ] ，这里的[ ]表示的是范围。

如今我们把 domain 设定为 [ 0 , d3.max(dataset) ] ，即0到 dataset 中的最大值。 range设定为0到500。这表示假设数据是45。则返回500。假设是30。则返回333.333。

接下来仅仅要在加入 rect 时给width属性赋值的时候换成变量 wx 就可以。

svg.selectAll("rect")
		   .data(dataset)
		   .enter()
		   .append("rect")
		   .attr("x",10)
		   .attr("y",function(d,i){
				return i * 30;
		   })
		   .attr("width",wx)           //注意这里
		   .attr("height",28)
		   .attr("fill","red");

这样，宽度会随着绑定的数据自己主动变化。

【 D3.js 入门系列 --- 3 】 做一个简单的图表！

【 D3.js 入门系列 --- 3 】做一个简单的图表！