为什么d3.histogram合并此图表的最后两个区域？

Question

在我正在研究的D3图表中，我有一个包含非线性图案的60个元素的带尺（101-110; 201-210; 301-310; 401-410; 501-510和601- 610-第一个数字代表季节，后两个数字代表最后两个数字）。

我能够很好地渲染图表，但是最后一个栏会合并到它之前的那个：

（忽略x轴标签全部搞砸的事实。）

知道为什么会这样吗？是因为我完全歪曲了直方图的含义，还是什么？

完整示例代码here。

Answer 1

你是对的：你完全歪曲了直方图的意思！这应该是条形图。

条形图本质上由代表分类变量的条形图组成。这意味着条形物位于表示分类变量的标签上，即定性变量。条形图和直方图都使用矩形来编码数据，但在直方图中，与条形图不同，标签表示定量变量。如果你在网上搜索，发现实际上是条形图的“直方图”，或者实际上是直方图的“条形图”，这是很常见的。

回到你的问题：可以在一个hacky解决方案中保留你的直方图：你只需要定义domain：

  

如果指定了domain，则将域访问器设置为指定的函数或数组，并返回此直方图生成器。

所以，你的直方图生成器应该是这样的：

const histogram = d3.histogram()
    .value(d => d.death)
    .domain([0, 1000])//in your case: [101 or less, more than 610]
    .thresholds(x.domain());

（我在这里使用魔术数字只是为了表明这个想法，相应地改变它们）

以下是更新的代码：https://www.webpackbin.com/bins/-KgCh8IjK6J56Dj_SA9X

分析

显然，当值与阈值一致时，d3.histogram没有创建最后一个bin。根据文档，应创建最后一个bin，因为x1（每个bin的最高值）不包括在内。

让我们看看这个片段：

var data = d3.range(10);

const histogram = d3.histogram()
  .value(d => d)
  .thresholds(data);

var bins = histogram(data);

console.log(bins)

<script src="https://d3js.org/d3.v4.js"></script>

你可以看到8和9放在最后一个箱子里。

其他阈值也不会发生同样的事情。首先，thresholdFreedmanDiaconis：

var data = d3.range(100);

const histogram = d3.histogram()
  .value(d => d)
  .thresholds(d3.thresholdFreedmanDiaconis(data, d3.min(data), d3.max(data)));

var bins = histogram(data);

console.log(bins)

<script src="https://d3js.org/d3.v4.js"></script>

然后，thresholdScott：

var data = d3.range(100);

const histogram = d3.histogram()
  .value(d => d)
  .thresholds(d3.thresholdScott(data, d3.min(data), d3.max(data)));

var bins = histogram(data);

console.log(bins)

<script src="https://d3js.org/d3.v4.js"></script>

最后，thresholdSturges：

var data = d3.range(100);

const histogram = d3.histogram()
  .value(d => d)
  .thresholds(d3.thresholdSturges(data, d3.min(data), d3.max(data)));

var bins = histogram(data);

console.log(bins)

<script src="https://d3js.org/d3.v4.js"></script>