score:0

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);

Related Query

More Query from same tag