d3.js: pan with limits

Question

I'm working on a basic linear chart with pan functionality.

I managed to limit the extent to which the chart elements can be dragged by limiting the d3.event.translate values:

var tx = Math.max(0, d3.event.translate[0]),
    ty = Math.min(0, d3.event.translate[1]);

All I need now is to limit the x and y axes accordingly. See the example: http://jsfiddle.net/Q2SWV/

The bars on the chart are limited by 0 when dragging down or to the left. The x and y axes aren't. Any ideas on how to fix the axis problem?

Answer 1

You're very close, but you're missing the final step of updating the zoom behavior with your updated translation coordinates. This will fix your problem since both axes are updated using the zoom. Add the following right after determining tx and ty:

zoom.translate([tx, ty]);

This will apply the limits to your axes. See updated fiddle here: http://jsfiddle.net/mdml/nZD3E/.