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', handleZoom))

I can't seem to call translateBy directly on the zoom behavior as is, is there some other way to apply translateBy?

Answer 1

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.