javascript - 为什么 d3.histogram 会合并此图表的最后两个 bin？

Question

在我正在处理的这个 D3 图表中，我有一个包含 60 个元素的非线性模式的波段尺度(101-110；201-210；301-310；401-410；501-510 和 601- 610——第一个数字代表季节，最后两位数字代表最后两位数字)。

我能够完美地呈现图表，但最后一个柱形会合并到它之前的柱形中:

(忽略 x 轴标签都乱七八糟的事实。)

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

完整示例代码 here .

Answer 1

您是对的:您完全曲解了直方图的含义!这应该是一个条形图。

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

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

If domain is specified, sets the domain accessor to the specified function or array and returns this histogram generator.

因此，您的直方图生成器应该是这样的:

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 一起放在最后一个 bin 中。

其他阈值不会发生同样的事情。首先，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>