javascript - 使用 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);