d3 缩放：如何防止自由拖动缩放元素？

Question

const performZoom = (event) => {
  const transform = event.transform;
  d3.select(svgContainer.value).attr("transform", transform)
  store.zoomLevel = transform.k
}

  const container = d3.select(mapContainer.value)
  const zoom = d3.zoom().scaleExtent([1, 10]).on("zoom", performZoom)
  container.call(zoom).on("wheel.zoom", null)

这就是我在项目中设置 d3 Zoom 的方式（Vue3，这就是我使用 .value 的原因）。问题是，在我开始缩放之前，我可以将整个元素（地图）移到视图之外，这是不可能的。我将在图片上向您展示问题：

但是，我不知道该怎么做。我在缩放元素上尝试了 .extent 函数，如下所示：

.extent([[0,0], [svgContainer.value.clientWidth, svgContainer.value.clientHeight]])

但似乎什么也没做。
换句话说：我希望它以最明显的方式工作，当您缩放时，您可以通过拖动来看到元素（地图）的所有部分，但不能拖动到元素的外部。
我可以得到任何帮助吗？

Answer 1

Используйте -translateExtent() Документация - https://d3js.org/d3-zoom#zoom_translateExtent

const performZoom = (event) => {
  const transform = event.transform;
  d3.select(svgContainer.value).attr("transform", transform)
  store.zoomLevel = transform.k
}

  const container = d3.select(mapContainer.value)
  const zoom = d3.zoom()
       .scaleExtent([1, 10])
       .translateExtent([[-svgContainer.value.clientWidth / 2, -svgContainer.value.clientHeight / 2], [svgContainer.value.clientWidth / 2, svgContainer.value.clientHeight / 2]])
       .on("zoom", performZoom)
  container.call(zoom).on("wheel.zoom", null)