D3.js实现直方图的方法详解

一、直方图介绍

直方图是分析照片的一种方式，水平表示亮度，垂直表示像素数。首先分析照片中所有像素的亮度，然后计算具体值，再映射到横轴。在这种情况下，亮度越高，像素越多。

直方图的查看规则是“左黑右白”，左侧代表深色部分，右侧代表亮色部分，中间部分代表中间色调。

垂直高度代表像素密度，它越高，在这个亮度上分布的像素就越多。

直方图用于描述概率分布，D3提供直方图的布局，用于变换数据。

假设有一个数组a=[10，11，11.5，12.5，13，15，19，20]，从10到20的数值范围现在分成五段，即：

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

那么数组A的值属于这些部分的哪一部分呢？经过计算，我们可以知道这五段中的元素数量是：

3, 2, 1, 0 , 2

用图表显示这是直方图。

好了，我们开始制作吧~

第二，数据

先把老师变成随机数据：

var rand=d3.random.normal(0，25)；var数据集=[]；for(var I=0；i100I){ dataset . push(rand())；} d3.random.normal生成一个可以根据正态(高斯)分布随机生成值的函数。传入两个参数，第一个是位置参数，第二个是大小参数。关于正态分布的定义，见维基百科。将此函数分配给rand后，可以使用rand()生成随机数。

三、布局(数据转换)

接下来，应该转换上述数据，即在确定间隔和分离数之后，另一个数组的值落在每个区域中。首先定义布局：

var bin _ num=15var直方图=d3.layout .直方图()。范围([-50，50])。箱(箱号)。频率(真)；D3.layout .直方图：直方图的布局

范围：间隔的范围

箱子：分离器的数量

频率：如果值为真，则计数；如果该值为假，则统计数据为概率

然后，您可以转换数据：

var数据=直方图(数据集)；让我们来看看转换前后数据的差异。转换前：

转换后：

可以看出，转换后的数组长度为分隔号，有值(0，1，2，)在每个间隔中落入该间隔的值的数量(长度)，以及

有三个参数：

x:间隔的起始位置

Dx:间隔宽度

y:落入该区间的值的数量(如果频率为真)；落入该区间的概率(如果频率为假)

第四，绘画

在绘图之前，我们需要定义一个比例尺，因为通常我们需要使转换后的Y比例在期望的范围内。

var max _ height=400var rect _ step=30var heights=[]；for(var I=0；idata.lengthi ){ heights.push(data[i])。y)；} var yScale=d3.scale.linear()。域([d3.min(高度)，d3.max(高度)]。范围([0，max _ height])；最后，画出图表：

//绘制图形var graphics=svg.append('g ').attr('transform '，' translate(30，20)')；//绘制矩形图形。选择所有("矩形")。数据（数据)。输入()。追加(' rect ').attr('x '，函数(d，I){ return I * rect _ step；}) .attr('y '，函数(d，I){ return max _ height-yScale(d . y)；}) .attr('宽度'，函数(d，I){ return rect _ step-2；}) .attr('height '，function(d){ return yScale(d . y)；}) .attr('填充'，'钢蓝色')；//绘制坐标轴的直线graphics.append('line ').attr('笔画','黑色')。attr('笔画宽度，' 1px ').attr('x1 '，0).attr('y1 '，最大高度)。attr('x2 '，data.length * rect_step).attr('y2 '，max _ height)；//绘制坐标轴的分隔符直线图形。选择所有('。线条刻度').数据（数据)。输入()。追加('行')。attr('笔画','黑色')。attr('笔画宽度，' 1px ').attr('x1 '，函数(d，I){ return I * rect _ step rect _ step/2；}) .attr('y1 '，最大高度)。attr('x2 '，函数(d，I){ return I * rect _ step rect _ step/2；}) .attr('y2 '，max _ height 5)；//绘制文字图形。选择全部("文本")。数据（数据)。输入()。追加('文本')。attr('font-size '，' 10px ').attr('x '，函数(d，I){ return I * rect _ step；}) .attr('y '，函数(d，I){ return max _ height；}) .attr('dx '，rect_step/2 - 8).attr('dy '，' 15px ').文本(函数(d){返回数学。楼层(d . x)；});五、总结

以上就是这篇文章的全部内容了，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。