对d3.js的方法实现直方图的详细解决方案

1。直方图简介

直方图是照片的分析，它代表的亮度水平，在纵向方向上的像素数。首先，照片中所有像素的亮度进行分析，然后计算出具体数值，并映射到横轴。那么高，在亮度更多的像素。

观看规则是左、右、右的黑白直方图，代表阴影、光线，代表中间的中间色调。

垂直高度代表像素密度的程度，并且在该亮度上分布的像素数越高。

直方图用于描述概率分布，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
这是一个在图形中显示的直方图。

好吧，让我们做吧。

两。数据
第一代随机数据是：

VaR兰德= d3.random.normal（0.25）；
var；
对于（var i = 0；i < 100；i + +）{
Dataset.push（rand（））；
}
d3.random.normal生成功能，可以通过正常的随机生成的（高斯）分布，介绍了两个参数，第一个是位置参数，二是尺寸参数的正态分布的定义，可以看出维基百科。兰德指定此功能后，随机数可以由伦德（）。
三，布局（数据转换）
接下来，将转换上述数据，即在确定间隔和分隔符的数目之后，另一个数组的数量落在各个区域：

无功bin_num = 15；
VAR直方图= d3.layout.histogram（）
范围（{ - 50,50 }）
垃圾箱（bin_num）。
频率（真）；
d3.layout.histogram：直方图的布局
范围：区间的范围
垃圾箱：分隔的数量
频率：如果值为真，则统计是一个数；如果值为false，则统计为概率。
然后可以转换数据：

var数据=直方图（数据集）；
让我们看看转换前和转换后的数据有什么区别：

转换后：

可以看出，转换数组的长度是分隔的个数。每个区间有价值下跌到这个区间（0,1,2，…），和长度的数。

有三个参数：
x：间隔的起始位置
间隔的宽度
y：到这个区间的值的数目（如果频率为真）；下降到这个区间的概率（如果频率是假）
四。图
在绘图之前，你需要定义一个刻度，因为通常我们需要在希望范围内把转换y刻度。

无功max_height = 400；
无功rect_step = 30；
var高度= }；
对于（var i = 0；i < data.length；i++）{
Heights.push（数据{我}，Y）；
}
VaR yscale = d3.scale.linear（）
。域（{ d3.min（Heights），d3.max（Heights）））
范围（{ 0，max_height }）；
最后，画出图形：

绘图
VaR图形= svg.append（G）
attr（变换。

绘制矩形
Graphics.selectAll（矩形）
数据（数据）
输入（）
。追加（矩形）
attr（X。
回到我rect_step；
}）
attr（Y。
返回max_height - yscale（d.y）；
}）
attr（宽。
返回rect_step - 2；
}）
attr（高度。
返回yscale（d.y）；
}）
attr（填。

行绘制轴
Graphics.append（行）
attr（中风。
。attr（笔画宽度
attr（X1。
attr（Y1 。
attr（X2。
attr（Y2 。

用直线分隔轴
Graphics.selectAll（。linetick ）
数据（数据）
输入（）
追加（行）
attr（中风。
。attr（笔画宽度
attr（X1。
回到我rect_step + rect_step / 2；
}）
attr（Y1 。
attr（X2。
回到我rect_step + rect_step / 2；
}）
attr（Y2 。

/绘制文本
Graphics.selectAll（文本）
数据（数据）
输入（）
追加（文本）
。attr（字体大小
attr（X。
回到我rect_step；
}）
attr（Y。
返回max_height；
}）
attr（DX。
attr（颐。
文本（函数（d）{）
返回math.floor（d.x）；
}）；
五。总结

以上就是本文的全部内容。我希望它能给大家的学习或工作带来一些帮助。如果有任何疑问，你可以留言。