首页 > 代码库 > 【 D3.js 进阶系列 — 5.0 】 直方图

【 D3.js 进阶系列 — 5.0 】 直方图

直方图用于描述概率分布,D3 提供了直方图的布局 Histogram 用于转换数据。

501

假设有数组 a = [10, 11, 11.5, 12.5, 13, 15, 19, 20 ],现在把10~20的数值范围分为5段,即:

10~12, 12~14, 14~16, 16~18, 18~20

那么数组 a 的各数值都落在这几段区域的哪一部分呢?经过计算,可以知道,这5段分别具有的元素个数为:

3, 2, 1, 0 , 2

将这个用图形展示出来的,就是直方图。好了,开始制作吧~

1. 数据

首先生成随机数据:

	var rand = d3.random.normal(0,25);
	var dataset = [];
	for(var i=0;i<100;i++){
		dataset.push( rand() );
	}

d3.random.normal 生成一个函数,这个函数能够按正态(高斯)分布随机生成数值。要传入两个参数,第一个是位置参数,第二个是尺寸参数。关于正态分布的定义,可参见维基百科。将这个函数赋值给 rand 之后,接下来只要用 rand() 即可生成随机数。

2. 布局(数据转换)

接下来,要将上述数据进行转换,即确定一个区间和分隔数之后,另数组的数值落在各区域里。先定义一个布局:

	var bin_num = 15;
	var histogram = d3.layout.histogram()
				.range([-50,50])
			        .bins(bin_num)
				.frequency(true);
  • d3.layout.histogram: 直方图的布局
  • range: 区间的范围
  • bins: 分隔数
  • frequency: 若值为 true,则统计的是个数;若值为 false,则统计的是概率

接下来即可转换数据:

var data = http://www.mamicode.com/histogram(dataset);

来看看转换前后的数据有什么分别吧。转换前:

502

转换后:

503

可以看到,转换后的数组,长度即分隔数,每一个区间内有落到此区间的数值(图中的0,1,2,...),数值的个数(length),还有三个参数:

  • x: 区间的起始位置
  • dx: 区间的宽度
  • y: 落到此区间的数值的数量(如果 frequency 为 true);落到此区间的概率(如果 frequency 为 false)

3. 绘制

绘制之前,需要定义一个比例尺,因为通常我们需要让转换后的 y 在希望的范围内伸缩。

	var max_height = 400;
	var rect_step = 30;
	var heights = [];
	for(var i=0;i<data.length;i++){
		heights.push( data[i].y );
	}
	var yScale = d3.scale.linear()
						.domain([d3.min(heights),d3.max(heights)])
						.range([0,max_height]);

最后,绘制图形:

	//绘制图形
	var graphics = svg.append("g")
						.attr("transform","translate(30,20)");
	
	//绘制矩形
	graphics.selectAll("rect")
			.data(data)
			.enter()
			.append("rect")
			.attr("x",function(d,i){
				return i * rect_step; 
			})
			.attr("y", function(d,i){
				return max_height - yScale(d.y);
			})
			.attr("width", function(d,i){
				return rect_step - 2; 
			})
			.attr("height", function(d){
				return yScale(d.y);
			})
			.attr("fill","steelblue");
	
	//绘制坐标轴的直线
	graphics.append("line")
			.attr("stroke","black")
			.attr("stroke-width","1px")
			.attr("x1",0)
			.attr("y1",max_height)
			.attr("x2",data.length * rect_step)
			.attr("y2",max_height);
	
	//绘制坐标轴的分隔符直线
	graphics.selectAll(".linetick")
			.data(data)
			.enter()
			.append("line")
			.attr("stroke","black")
			.attr("stroke-width","1px")
			.attr("x1",function(d,i){
				return i * rect_step + rect_step/2;
			})
			.attr("y1",max_height)
			.attr("x2",function(d,i){
				return i * rect_step + rect_step/2;
			})
			.attr("y2",max_height + 5);
	
	//绘制文字
	graphics.selectAll("text")
			.data(data)
			.enter()
			.append("text")
			.attr("font-size","10px")
			.attr("x",function(d,i){
				return i * rect_step; 
			})
			.attr("y", function(d,i){
				return max_height;
			})
			.attr("dx",rect_step/2 - 8)
			.attr("dy","15px")
			.text(function(d){
				return Math.floor(d.x);
			});

4. 结果

结果图即本文开头的图片。

完整代码请点击下面的链接后,单击右键后再“查看源代码”:

http://www.ourd3js.com/demo/J-5.0/histogram.html

文档信息

  • 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
  • 发表日期:2014 年 12 月 17 日
  • 更多内容:OUR D3.JS - 数据可视化专题站 和 CSDN个人博客
  • 备注:本文发表于 OUR D3.JS ,转载请注明出处,谢谢

【 D3.js 进阶系列 — 5.0 】 直方图