D3.js: calculate x-axis time scale for bar graph?

Question

I have the following dataset:

var data = [
  {
    \"air_used\": 0.660985, 
    \"datestr\": \"2012-12-01 00:00:00\", 
    \"energy_used\": 0.106402
  }, 
          


        

Answer 1

Expand your domain to be +1 and -1 month from the actual extent of your data. That will pad the graph with the extra months on either side and then update the bar width to add 2 to the count of data elements.

var barRawWidth = width / (data.length + 2);

See this fiddle: http://jsfiddle.net/reblace/aWJtJ/6/

If you want to hide the lower and upper boundary months, you can hack it like this: http://jsfiddle.net/reblace/aWJtJ/7/ by just adding and subtracting 20 days instead of a whole month, but there are probably more elegant ways to do it.

var xExtent = d3.extent(data, function(d) { return d.date; });
var nxExtent = [d3.time.day.offset(xExtent[0], -20), d3.time.day.offset(xExtent[1], 20)];
x.domain(nxExtent);