使用 d3，我如何创建一个直方图或条形图，其中最后一个条是所有大于某个数字的值的计数？

Question

代码链接：https://plnkr.co/edit/jLkoMxdzArBBULHF80nb?p=preview

我有一些分散值的数据。范围从 61 到 1.2m。

如何以一种有意义的方式在直方图中表示它？ 例如，我可以在 d3 上拥有最后一个存储桶 > 2000 吗？

类似这样的事情（超过 5 分钟）：

Answer 1

首先您需要整理您的数据（如果您还没有），您只需要使用> 2000 值创建一个变量。

我就是这样做的（我上周开始d3，我以前对JavaScript没有任何了解，所以可能有更好的方法）：

var data = [];

for (var i = 0; i < oldData.length; ++i) {
  if (oldData[i] >= 2000) {
    data[i] = 2000;
  }
  else data[i] = oldData[i];
}

---

下一步，手动设置你想要的刻度和对应的刻度标签：

var ticks = [0,200,400,600,800,1000,1200,1400,1600,1800,2000];
var tickLabels = [0,200,400,600,800,1000,1200,1400,1600,1800,"> 2000"];

（请注意，如果需要分隔符，可以更改为“1,200”等）

我喜欢创建一个单独的xAxis 变量，而不是直接将d3.axisBottom(x) 调用到您的图表，并为其设置刻度和刻度标签：

var xAxis = d3.axisBottom(x)
              .tickValues(ticks)
              .tickFormat(function(d,i){ return tickLabels[i] });

---

最后你调用图表上的xAxis：

chart.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);