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

d3.layout.histogram()

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

直方图用于描述概率分布,假设有数组 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);

转换后的数据如图所示。

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

数据参数的含义如下:

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

查看在线演示

上一篇:ASP.NET Core on K8S深入学习(3-1)Deployment


下一篇:存储系统市场竞争格局改变 企业面临挑战