title: d3.timeScale() X axis doesn't display years
body: <p>I'm making the X axis display years. However it doesn't work and my cx values are 0. My guess is something wrong with  <code>d3.timeFormat</code> parsing years values. </p>
  
  <pre><code>//d3.format year as yyyy
  let dateFormat = d3.timeFormat("%Y");
  
  //Define x and y scale range
  let xScale = d3.scaleTime()
      .range([0, width])
  
  //Define x and y axis
  let xAxis = d3.axisBottom(xScale)
      .ticks(10)
      .tickFormat(d =&gt;
          dateFormat(d))
  
  xScale.domain(d3.extent(data, d =&gt; 
          dateFormat(d.year)
          ))
  
  let circles = svg.selectAll("circle")
          .data(data)
          .enter()
          .append("circle");
  
  circles
          .attr("cx", d =&gt;
              xScale(dateFormat(+d.year)))
          .attr("cy", d =&gt;
              yScale(d.emissions))
          .attr("r", 4)
          .style("fill", "blue")
  </code></pre>
  
  <p>Current output:</p>
  
  <p><a href="https://i.stack.imgur.com/f7D2V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f7D2V.png" alt="enter image description here"></a></p>
  
  <p>Desired output:</p>
  
  <p><a href="https://i.stack.imgur.com/7aBwq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7aBwq.png" alt="enter image description here"></a></p>
  
  <p><a href="https://codepen.io/edgarkiljak/pen/MzwNQB" rel="nofollow noreferrer">Codepen</a></p>