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

Question

Code link: https://plnkr.co/edit/jLkoMxdzArBBULHF80nb?p=preview

I have a data with some disperse values. It ranges from 61 to 1.2m.

How can I represent it in a Histogram in a way that makes sense? Can I have the last bucket on d3 that is > 2000 for instance?

Something like this (greater than 5 minutes):

Answer 1

First of all you will need to arrange your data (if you haven't yet), where you just need to create a variable with the > 2000 values.

This is the way I did it (I started d3 last week and I don't have any previous knowledge on JavaScript , so there's probably a better way to do it):

var data = [];

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

---

Next thing, is o set manually the ticks you want and the tickLabels that correspond to it:

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"];

(notice that you can change to "1,200" and so on if you want the separator)

And instead of calling the d3.axisBottom(x) directly to your chart, I like to create a separate xAxis variable, and set the ticks and tickLabels to it:

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

---

Finally you call the xAxis on your chart:

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