How to modify a domain dealing with dates in d3.js?

Question

I am studying this example: https://bl.ocks.org/d3noob/2505b09d0feb51d0c9873cc486f10f67 made by d3noob and I realized that the first and the last dot are partially in the margins. I am wondering how to make a buffer on each side of the x.domain in order to keep the dots away from the margins.

I believe that the line responsible of this is the following:

x.domain(d3.extent(data, function(d) { return d.date; }));

I tried to modify this line with d3.min and d3.max but this doesn't seem to work as the x axis is dealing with dates.

Answer 1

You can add or subtract time (in this case, days) using interval.offSet .

For instance, subtracting 2 days from the start and adding 2 days in the end of the x domain:

x.domain([d3.timeDay.offset(d3.min(data, function(d) {
    return d.date;
}), -2), d3.timeDay.offset(d3.max(data, function(d) {
    return d.date;
}), +2)]); 

Here is the updated bl.ocks: https://bl.ocks.org/anonymous/f4bb84ba833b6f8ec9ddd3e8281abc44/79839a6a937d712edca8a7c8f00e4301723726c3

Answer 2

You might want to consider trying the d3fc extent component . In your case, you can add one day on either side of the x scale as follows:

var xExtent = fc.extentDate()
   // the property of the data that defines the x extent
  .accessors([function(d) { return d.date; }])
  // pad in domain units (in this case milliseconds)
  .padUnit('domain')
  // ensure that the scale is padded by one day in either direction
  .pad([millisPerDay, millisPerDay]);

x.domain(xExtent(data));

You can also use this component to simplify the computation of the y domain extent:

var yExtent = fc.extentLinear()
  // the property of the data that defines the y extent
  .accessors([function(d) { return d.close; }])
  // pad by 10% in the +ve direction
  .pad([0, 0.1])
  // ensure that the extent includes zero
  .include([0]);

y.domain(yExtent(data));

Here's a complete example: https://bl.ocks.org/ColinEberhardt/4b8737e0251f92075693a6e04df72638