title: How can I apply a time scale and show my data in intervals of "n" years?
body: <p>I need use a time scale for the x axis to represent the year. It may
  be necessary to use time parsing/formatting when you load and display
  the year data. The axis would be overcrowded if you display every year
  value so I'd like to set the x-axis ticks to display one tick for every 3 years.</p>
  
  <p>how can do it?</p>
  
  <p><a href="https://i.stack.imgur.com/ZVlXi.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZVlXi.jpg" alt="enter image description here"></a></p>
  
  <p>this is my live code:</p>
  
  <p><a href="https://plnkr.co/edit/qOqvG5T0yb0P4TbW6Kv6?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/qOqvG5T0yb0P4TbW6Kv6?p=preview</a></p>
  
  <pre><code>d3.dsv(",", "data.csv").then(function (data) {
    console.log(data);
  
  
    // Scale the range of the data in the domains
    x.domain(data.map(function (d) { return d.year; }));
    y.domain([0, d3.max(data, function (d) { return d.running_total; })]);
  
    // append the rectangles for the bar chart
    svg.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function (d) { return x(d.year); })
      .attr("width", x.bandwidth())
      .attr("y", function (d) { return y(d.running_total); })
      .attr("height", function (d) { return height - y(d.running_total); });
  
    // add the x Axis
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));
  
    // add the y Axis
    svg.append("g")
      .call(d3.axisLeft(y));
  </code></pre>