title: d3.js - evenly spaced bars on a time scale
body: <p>I'm building a bar plot in d3.js in which each bar represents total TB cases during a month.  The data essentially consists of a date (initially strings in %Y-%m format, but parsed using d3.time.format.parse) and an integer. I'd like the axis labels to be relatively flexible (show just year boundaries, label each month, etc.), but I'd also like the bars to be evenly spaced.  </p>
  
  <p>I can get flexible axis labeling when I use a date scale:</p>
  
  <pre><code>var xScaleDate = d3.time.scale()
      .domain(d3.extent(thisstat, function(d) { return d.date; }))
      .range([0, width - margin.left - margin.right]);
  </code></pre>
  
  <p>... but the bars aren't evenly spaced due to varying numbers of days in each month (e.g., February and March are noticeably closer together than other months). I can get evenly-spaced bars using a linear scale:</p>
  
  <pre><code>var xScaleLinear = d3.scale.linear()
        .domain([0, thisstat.length])
        .range([0, width - margin.left - margin.right]);
  </code></pre>
  
  <p>... but I can't figure out how to then have date-based axis labels. I've tried using both scales simultaneously and only generating an axis from the <code>xScaleDate</code>, just to see what would happen, but the scales naturally don't align quite right.</p>
  
  <p>Is there a straightforward way to achieve this that I'm missing? </p>