Can I use zoom.translateBy to set an initial pan?

Question

I\'ve got something like

zoomable
  .call(d3.zoom()
    .scaleExtent([1, Infinity])
    .translateExtent([[0, 0], [width, height]])
    .on(\'zoom\', handleZ         


        

Answer 1

And this is how you would apply relative translations and zoom afterwords, in this example I am using Mousetrap to attach keyboard events to allow zooming and panning.

transform = d3.zoomTransform(zoomable.node());

Mousetrap.bind(['=', '+', 'pageup'], function() {
    zoomable.call(zoom).call(zoom.scaleTo, transform.k << 1);
});
Mousetrap.bind(['-', 'pagedown'], function() {
    zoomable.call(zoom).call(zoom.scaleTo, transform.k >> 1);
});

Mousetrap.bind(['down'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            0, // / transform.k, 
            -50 / transform.k
        ); 
});
Mousetrap.bind(['up'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            0,
            +50 / transform.k
        ); 
});
Mousetrap.bind(['left'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            +50 / transform.k, 
            0
        ); 
});
Mousetrap.bind(['right'], function() {
    zoomable
        .call(zoom)
        .call(zoom.translateBy, 
            -50 / transform.k, 
            0
        ); 
});