Javascript D3柱状图:产生错误的存储箱数的阈值

Javascript D3柱状图:产生错误的存储箱数的阈值,javascript,d3.js,histogram,data-visualization,Javascript,D3.js,Histogram,Data Visualization,我正在使用D3创建一个直方图JS脚本,它似乎工作正常。。。除了箱子的数量 以下是我的代码的相关部分: //Define the scales for the x and y attributes var x = d3.scaleBand() .range([0, width]) .padding(configProperties.barPadding); var y = d3.scaleLinear() .range([height,0]); //Create the

我正在使用D3创建一个直方图JS脚本,它似乎工作正常。。。除了箱子的数量

以下是我的代码的相关部分:

//Define the scales for the x and y attributes
var x = d3.scaleBand()
    .range([0, width])
    .padding(configProperties.barPadding);
var y = d3.scaleLinear()
    .range([height,0]);

//Create the bins
var bins = d3.histogram()
    .domain(d3.extent(data))
    .thresholds(configProperties.binsCount)
    (data);

console.log("number of bins: " + bins.length); //9
console.log("intended number of bins: " + configProperties.binsCount); //10
如果我将configProperties.binsCount设置为9,那么bins.length仍然是9。 如果我将configProperties.binsCount设置为14,那么bins.length仍然是9

但是,如果我将binsCount设置为15或更高。。。箱子长度输出23

我对histogram.thresholds工作原理的理解是,如果我给它一个值,它会将数据分成多个+1相等的段(即多个箱子)。然而,它似乎根本没有这样做。我能找到的所有示例代码似乎都表明我正确地使用了它,但我无法获得所需的垃圾箱数量

我也尝试过将其用作阈值参数,但遇到了相同的问题


有什么我遗漏的吗?这和我的域名有关吗?提前谢谢

您正在将一个计数(即一个简单的数字)传递给
阈值
函数,而不是数组

你看到的是当你传递一个数字时的预期行为。根据报告:

如果指定的是计数而不是阈值数组,则域将被统一划分为大约个计数箱

让我们在这个演示中看到:

var数据=d3.范围(100);
常量直方图=d3.直方图()
.值(d=>d)
.阈值(5);
var bins=直方图(数据);
console.log(“箱子数量为”+箱子长度)

我意识到这有点过时了,Gerardo解释了如何按照你的要求去做,但他实际上没有回答问题的原因。这就是,以防其他人遇到这个问题并感到好奇。如果您将一个数字传递给thresholds函数,D3会找到接近该数字的多个箱子,这样阈值就是“不错”的数字。选择那些“好”的数字会导致箱子的数量不同于您指定的数量


因此,如果您的数据从0变为24.37,并且您请求8个存储箱,则阈值不会是3.481428571428的倍数。。。( = 24.37 / (8-1)). 取而代之的是,D3将选择一个“好”的最大值25,阈值将是2.5的倍数(生成10个箱子)或5的倍数(生成5个箱子)。这些数字在图形上的显示效果更好,如果人类手工绘制直方图,他们可能会选择这些数字

谢谢你的回复!所以,我想我没有得到预期数量的垃圾箱的真正答案是因为我的数据集不允许它?我发现这有点让人困惑,因为如果我使用在线直方图绘图器,它可以使用任意数量的容器(例如,根据我的示例为10个)绘制数据图表,显示我的意思。我想我已经找到了如何做到这一点的方法,根据数据和提供的以及容器计数手动计算我自己的阈值数组。这似乎比使用count更有效。再次感谢你帮助我思考这个问题。