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] })

查看在线演示