d3.js之多组柱状图

参考博客

有什么不知道的API可以参考D3中文API

也可以去查看别人写的普通柱状图柱状图详解

之前学习d3的时候就看到柱状图中有那种几组几组在一起，今天看到一个demo就是这种几组一起的。

就去仔细看了那个Demo,并且写下这篇文章。

这是V3版本

思路：平时写的写的柱状图都是一个一个，那么怎么将一个柱状图中一个分成好几个呢。

大概的思路就是这样的，其实他写了四个柱状图来将他拼凑在一起，这四个柱状图对应相同的下标的rect放在一起。

var n = 20, // number of samples
		m = 4; // number of series
var data=d3.range(m).map(function(){
			return d3.range(n).map(Math.random);
		})

首先来生成数据，range(m)生成一个长度为4的数组，然后map遍历并且返回一个数组。

然后看return里面：d3.range(n).map(Math.random):这是返回一个长度n的数组并且数值是0-1之间的随机数。

		var y = d3.scale.linear()
			.domain([0, 1])
			.range([height, 0]);

		var x0 = d3.scale.ordinal()
			.domain(d3.range(n))
			.rangeBands([0,width],.2);

		var x1=d3.scale.ordinal()
			.domain(d3.range(m))
			.rangeBands([0,x0.rangeBand()]);

上面总共设置三个比例尺：一个线性两个序数比例尺

y是用来给y轴的，他的domain范围正好对应上面随机生成的0-1之间随机数。根据这个来获取对应高度

x0 比例尺他的范围d3.range(n)，既n长度的数组，这就相当于坐标尺分成了N份。

x0.rangeBand()表示的是x0比例尺的区间宽度。每一个元素在值域上面间隔。既1份的宽度

x1比例尺他的范围是d3.range(m),对应的范围是x0的rangeBand()，现在又将这1份的宽度分为m份。既在一份的宽度上面显示多个rect;