Trying to limit the panning on my svg viewbox to the bottom right corner of the svg when zoomed. I have seen a few similar questions on here already but am still yet to find a working answer.

In my code below you'll see that the zooming is working but with extent and translateExtent the panning ceases to work. As soon as I comment these 2 functions out the panning works but the limits are wrong (they are the coordinates of the bottom right hand corner of the svg but this causes the whole svg to be out of view). I understand the current extent and translateExtent values are probably incorrect but I have played around with loads of different values and have failed to see any logical consistency to work with. For example setting the translateExtent to, say, [[0,0], [3000, 3000]] I'd expect the panning to be far greater than normal and be able to pan way off screen, however panning just stops working altogether?

I'm clearly misunderstanding something here. Please can someone tell me where I'm going wrong! Thanks.

Live code here: https://jsfiddle.net/9b7w4z58/1/

Image below illustrates how I intend the svg to look when panned fully.