d3.layout.histogram()
直方图用于描述概率分布,假设有数组 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
将这个用图形展示出来的,就是直方图。
分区图(Histogram)的API说明
- histogram.bins - 分隔数。
- histogram.frequency - 若值为 true,则统计的是个数;若值为 false,则统计的是概率
- histogram.range - 取得或设置值得范围。
- histogram.value - 取得或设置值访问器。
- histogram - 使用量化的箱计算数据的分布。
1、数据
var dataset = [
0,1,2,3,
10,11,12,13,14,15,16,17,18,19,
20,21,
30,32,37,
40,45,46,49,
50,52,55,
60,69,
70,77,
80,81,
90,91,99,
100
];
2、数据转换
var partition = d3.layout.histogram()
.range([0,100])
.bins(10)
.frequency(true)
var data = partition(dataset);
转换后的数据如图所示。
数据参数的含义如下:
0,2,3….:落到此区间的数值
length:数值的个数
x: 区间的起始位置
dx: 区间的宽度
y: 落到此区间的数值的数量(如果 frequency 为 true);落到此区间的概率(如果 frequency 为 false)
3、绘制图形
生成SVG容器
var width = 500;
var height = 200;
var svg = d3.select('body').append('svg')
.attr('width',width)
.attr('height',height)
生成x轴和y轴比例尺
var x = d3.scale.linear().domain([0,100]).range([0,width])
var y = d3.scale.linear().domain([0,10]).range([0,height])
为区间数据创建容器
var bar = svg.selectAll('g').data(data)
.enter()
.append('g')
.attr('transform',function(d,i){
return 'translate('+ x(d.x) +','+ (height-y(d.y)) +')';
});
为区间数据创建矩形
bar.append('rect')
.attr('x',0)
.attr('width',function(d,i){
return x(d.dx)-1
})
.attr('height',function(d,i){
return y(d.y);
})
.attr('fill','steelblue');
生成区间值文本
bar.append('text')
.attr('x',5)
.attr('y',20)
.style({
'font-size':12,
'fill': '#fff'
})
.text(function(d,i){
return d[0]+' - '+d[d.length-1]
})