title: D3.js: calculate width of bars in time scale with changing range?
body: <p>I'm building a D3 bar chart with a time scale on the x-axis. The range of the x-axis can vary. </p>
  
  <p>How can I specify the correct width for the bars on the bar chart? I've seen people use <code>rangeBands</code> for ordinal scales, but I'm not sure how to do this with a time scale. </p>
  
  <p>Here is my code: </p>
  
  <pre><code>var x = d3.time.scale().range([0, width]);
  var xAxis = d3.svg.axis().scale(x).orient("bottom");
  [...]
  
  // After new data has been fetched, update the domain of x...
  x.domain(d3.extent(data, function(d) { return d.date; }));
  d3.select(".x.axis").call(xAxis);
  
  // ... and draw bars for chart
  var bars = svg.selectAll(".air_used")
      .data(data, function(d) { return d.date; });
  
  bars.attr("y", function(d) { return y(d.air_used); })
  .attr("height", function(d) { return height - y(d.air_used); })
  .attr("x", function(d) { return x(d.date); })
  .attr("width", 20) // ??
  </code></pre>
  
  <p>What should I put on the last line, in place of 20?</p>
  
  <p>UPDATE: JSFiddle here: <a href="http://jsfiddle.net/aWJtJ/2/" rel="noreferrer">http://jsfiddle.net/aWJtJ/2/</a></p>