title: How to Align D3.js X-axis Dates with Supplied Data
body: <p>I'm creating a time-based line chart and everything looks fine but I'm having difficulty with the x-axis tickmarks. As you can see <a href="http://jsfiddle.net/shubo/Yvupw/" rel="nofollow">http://jsfiddle.net/shubo/Yvupw/</a> the dates start at 2013-01-30 and ends at 2013-04-17 but the chart tick mark starts at 2013-2-3 and ends at 2013-4-14. What do I need to do so the first tickmark would show 2013-01-03 and the last one would show 2013-4-17?</p>
  
  <pre><code>var json = {
    "data": [
      {
        "date": "2013-04-17",
        "metric": 437792798
      },
      {
        "date": "2013-04-10",
        "metric": 437792998
      },
      {
        "date": "2013-04-03",
        "metric": 434633203
      },
      {
        "date": "2013-03-27",
        "metric": 431786310
      },
      {
        "date": "2013-03-20",
        "metric": 429614980
      },
      {
        "date": "2013-03-13",
        "metric": 427709519
      },
      {
        "date": "2013-03-06",
        "metric": 425894908
      },
      {
        "date": "2013-02-27",
        "metric": 423657524
      },
      {
        "date": "2013-02-20",
        "metric": 420392146
      },
      {
        "date": "2013-02-13",
        "metric": 417215035
      },
      {
        "date": "2013-02-06",
        "metric": 412433066
      },
      {
        "date": "2013-01-30",
        "metric": 408952856
      }
    ]
  };
  
  var margin = {top: 20, right: 50, bottom: 30, left: 50},
      width = 960 - margin.left - margin.right,
      height = 110 - margin.top - margin.bottom;
  
  var parseDate = d3.time.format("%Y-%m-%d").parse;
  
  var x = d3.time.scale()
      .range([0, width]);
  
  var y = d3.scale.linear()
      .range([height, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");
  
  var line = d3.svg.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.metric); });
  
  var svg = d3.select("body").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 + ")");
  
  var data = json.data;
  
  data.forEach(function(d) {
    d.date = parseDate(d.date);
  });
  
  data.sort(function(a, b) {
    return a.date - b.date;
  });
  
  x.domain([data[0].date, data[data.length - 1].date]);
  y.domain(d3.extent(data, function(d) { return d.metric; }));
  
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  
  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
  
  var format = d3.format(',');
  </code></pre>