How to get the boundaries of currently visible time scale (after panning and zooming)?

Question

I would like to load in additional data points for the graph only if it scales or translates. Suppose I have a graph for the specific time range (http://codepen.io/jayarjo/pen/gzfyj), now if the user pans or zooms it to a wider range I want to load a wider data corresponding to that range and plot additional data points. I'm not sure how to get the currently visible date range from the D3...?

Answer 1

Simply retrieve inverted values of the beginning and ending points of your scale, which apparently are 0 and width of the scale:

var startDate = x.invert(0);
var endDate = x.invert(width); // where width is the visible width of the x scale