Add space between x-axis and line with time scale

Question

I am using an example below.

HTML-

CSS-

.         


        

Answer 1

The x.domain is the user space side of the user space to pixel space mapping. In your code you are setting the domain as:

x.domain(d3.extent(data, function(d) { return d[0] - 1; }));

Which says start my x axis at my min time minus 1 millisecond.

If you want some space before / after the line. Try:

x.domain([
  d3.min(data, function(d) { return d[0].getTime() - 1.8e+7; }),
  d3.max(data, function(d) { return d[0].getTime() + 1.8e+7; })
]);

Which says start my x axis 5 hours before my min date and stop it 5 hours after my max date.

Updated fiddle.

EDITS

Just used a percentage based scheme, say you want 5% padding (3.6 hours with your current data):

var minDate = d3.min(data, function(d) { return d[0].getTime(); }),
    maxDate = d3.max(data, function(d) { return d[0].getTime(); }),
    padding = (maxDate - minDate) * .05;

x.domain([minDate - padding, maxDate + padding]);

Updated fiddle.