Disable Zoom but Preserve Pan in D3 Observable

Question

Working with the D3 Observable Zoomable Map Tiles .

I want to allow panning , but disable zooming . Is there a way to disable zooming, but keep the ability to pan the visual?

The relevant code is here:

 svg
  .call(zoom)
  .call(zoom.transform, d3.zoomIdentity
    .translate(width >> 1, height >> 1)
    .scale(1 << 12));

function zoomed(transform) {
const tiles = tile(transform);

image = image.data(tiles, d => d).join("image")
    .attr("xlink:href", d => url(...d3.tileWrap(d)))
    .attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale)
    .attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)
    .attr("width", tiles.scale)
    .attr("height", tiles.scale);
}

But the transform seems to combine zooming and panning as a single function.

Answer 1

You can limit the extent of a zoom by calling scaleExtent on the zoom behavior. You didn't specify the definition of zoom in svg.call(zoom) so I've created a definition in the example.

const zoom = d3.zoom().scaleExtent([1, 1]);

svg
  .call(zoom)
  .call(
    zoom.transform,
    d3.zoomIdentity.translate(width >> 1, height >> 1).scale(1 << 12)
  );