title: how to config time range for d3.js
body: <p>I've tried setting config time range <code>.ticks(d3.time.days, 2)</code> for xAxis in this.</p>
  
  <pre><code>var data = [{"date":"2012-03-20","total":3},{"date":"2012-03-21","total":8},{"date":"2012-03-22","total":2},{"date":"2012-03-23","total":10},{"date":"2012-03-24","total":3},{"date":"2012-03-25","total":20},{"date":"2012-03-26","total":12}, {"date":"2012-03-27","total":22}, {"date":"2012-03-28","total":21}, {"date":"2012-03-29","total":12}, {"date":"2012-03-30","total":12}, {"date":"2012-03-31","total":12}, {"date":"2012-04-1","total":12}];
  
  var margin = {top: 40, right: 40, bottom: 40, left:40},
      width = 600,
      height = 500;
  
  var x = d3.time.scale()
      .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 1].date), 1)])
      .rangeRound([0, width - margin.left - margin.right]);
  
  var y = d3.scale.linear()
      .domain([0, d3.max(data, function(d) { return d.total; })])
      .range([height - margin.top - margin.bottom, 0]);
  
  var xAxis = d3.svg.axis()
      .scale(x)
      .orient('bottom')
      .ticks(d3.time.days, 2)
      .tickFormat(d3.time.format('%a %d'))
      .tickSize(0)
      .tickPadding(20);
  
  var yAxis = d3.svg.axis()
      .scale(y)
      .orient('left')
      .tickPadding(8);
  
  var svg = d3.select('body').append('svg')
      .attr('class', 'chart')
      .attr('width', width)
      .attr('height', height)
    .append('g')
      .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
  
  svg.selectAll('.chart')
      .data(data)
    .enter().append('rect')
      .attr('class', 'bar')
      .attr('x', function(d) { return x(new Date(d.date)); })
      .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.total)) })
      .attr('width', 10)
      .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.total) });
  
  svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
      .call(xAxis);
  
      svg.append('g')
        .attr('class', 'y axis')
        .call(yAxis);
  </code></pre>
  
  <p>But the time range is Sat 31 - Sun 1. I want it to be Sat 31 - Mon 2.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/vinhnguyenle/KWRxW/260/" rel="nofollow">jsFiddle</a>.</p>