【D3.js 学习总结】19、D3布局-直方图

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

查看在线演示