title: How to limit number of ticks to display in D3.js?
body: <p>I found an example. <a href="http://jsfiddle.net/aWJtJ/8/" rel="nofollow noreferrer">http://jsfiddle.net/aWJtJ/8/</a>, for limiting number of ticks but it uses D3.js version 3. I converted the code to version 5 but I am not getting the same result. It shows only two bars. Complete Fiddle: <a href="http://jsfiddle.net/pmLf095y/" rel="nofollow noreferrer">http://jsfiddle.net/pmLf095y/</a></p>
  
  <pre><code>// Margins, width and height.
  var margin = {top: 20, right: 20, bottom: 30, left: 10},
      body_width = 500,
      width = body_width - margin.left - margin.right,
      height = 200 - margin.top - margin.bottom;
  
  // Scales.
  var x = d3.scaleTime().range([width/data.length/2, width-width/data.length/2]);
  var y = d3.scaleLinear().range([height, 0]);
  
  // Construct our SVG object.
  var svg = d3.select(".system-efficiency").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
  // X-axis.
  var xAxis = d3.axisBottom(x)
      .ticks(d3.timeMonth.every(1))
      .tickFormat(d3.timeFormat('%b %Y'));
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
  // Set scale domains.
  x.domain(data.map(d =&gt; new Date(d.datestr)));
  y.domain([0, d3.max(data, function(d) { return d.air_used; })]);
  
  // Call x-axis.
  d3.select(".x.axis")
      .transition().duration(1000)
      .call(xAxis);
  
  // Draw bars.
  var bars = svg.selectAll(".air_used")
      .data(data, function(d) { return d.datestr; });
  
  bars.exit().remove();
  
  bars.transition().duration(1000)
      .attr("x", function(d) { return x(d.date) - width/data.length/2; })
      .attr("width", width / data.length)
      .attr("y", function(d) { return y(d.air_used); })
      .attr("height", function(d) { return height - y(d.air_used);});
  
  bars.enter().append("rect")
      .attr("class", "air_used")
      .attr("width", width / data.length)
      .attr("x", function(d) { return x(new Date(d.datestr)) - (width/data.length)/2; })
      .attr("y", height)
      .attr("height", 0)
      .transition().duration(1000)
      .attr("y", function(d) { return y(d.air_used); })
      .attr("height", function(d) { return height - y(d.air_used);}); 
  </code></pre>