javascript - 在 D3 Observable 中禁用缩放但保留平移

Question

使用D3 Observable Zoomable Map Tiles 。

我想允许平移，但禁用缩放。有没有办法禁用缩放，但保留平移视觉效果的能力？

相关代码在这里:

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

但是转换似乎将缩放和平移结合为一个功能。

Answer 1

您可以通过调用 scaleExtent 来限制缩放范围关于缩放行为。您没有在 svg.call(zoom) 中指定 zoom 的定义，因此我在示例中创建了一个定义。

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

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