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
        ); 
});

Answer 2

This assumes you're using d3 v4

Here's how the zoom behavior is initialized in this relevant example

var zoom = d3.zoom()
  .on("zoom", zoomed)

canvas
  .call(zoom.transform, transform)

To demystify a bit, the last line could be also written like this:

zoom.transform(canvas, transform)

transform is a function, supplied by you. Since this function is called and its returned value is used, you could also rewrite it like this:

zoom.transform(canvas, d3.zoomIdentity.translate(...) /* and .scale(...) etc */)

That's the lowest level way to apply a transform.

For convenience, instead of zoom.transform, you can more simply use zoom.translateBy, (which internally calls zoom.transform like above)

var zoom = d3.zoom()
  .scaleExtent([1, Infinity])
  .translateExtent([[0, 0], [width, height]])
  .on('zoom', handleZoom)

zoomable.call(zoom.translateBy, initialX, initialY)

Or alternatively, the last line could be rewritten:

zoom.translateBy(zoomable, initialX, initialY)

In both cases, zoomable is involved, because zoom doesn't maintain its own state of translation and scale. That state is stored on the element being transformed, i.e. zoomable.