Bounded Panning in D3

It's useful to know how to manage this situation when you have zooming enabled as well, as sometimes you want to zoom and pan in the x direction within limits.

In this case you might go outside of your bounds with a zoom operation, so translate won't be reliable when zooming too far out (as your domain will be larger than your data bounds) so you'll have to limit the domain instead.

    // assuming xlowerlimit and xupperlimit variables.
    var currentDomain = svg.x.domain();
    var xinterval = currentDomain[1] - currentDomain[0];
    
    if (currentDomain[0] < xlowerlimit) {
      // if moving outside of lower bound, set min of domain to lower, keeping domain interval the same
      svg.x.domain([xlowerlimit, xlowerlimit + xinterval]);
    } else if (currentDomain[1] > xupperlimit) {
      // if moving outside of upper bound, set max of domain to upper, keeping domain interval the same
      svg.x.domain([xupperlimit - xinterval, xupperlimit]);
    }

Implementation difficulties aside, isn't the ideal solution to provide well-executed zooming ability on the data, a la Google Finance charts?

http://www.google.com/finance?cid=694653

The problem with view panning is that you are not able to easily compare the viewable scope of data with the entire dataset. With a zoomable view, some granularity is lost...but I suspect the majority of use-cases would get more benefit out of seeing the "big picture" than merely being able to see each datapoint...and if seeing each datapoint was important, that kind of specificity is better implemented through tabular data rather than chart visualization.

Spiros!!!