Question

在地图中单击时，我试图缩放到边界框。我也想限制容器内的翻译区域。当我尝试使用边框将特征居中时，缩放无法说明使用tranlateExtent设置为d3.zoom()的{{1}}。这是我做的block。

这就是我开始缩放的方式。

d3.zoomTransform.translate([n,n]).scale(n)

我会像这样处理点击

var zoom = d3.zoom()
  .translateExtent([[0, 0],[width, height]])
  .scaleExtent([1, 8])

Answer 1

我修复了它手动执行translateExtent的问题。

var scale = Math.max(1, Math.min(this._maxZoom, 1 / Math.max(width / zoomArea.width, height / zoomArea.height))),

translate = [
    Math.min(zoomArea.x, Math.max(zoomArea.width / 2 - scale * x, zoomArea.width - zoomArea.width * scale)),
    Math.min(zoomArea.y, Math.max(zoomArea.height / 2 - scale * y, zoomArea.height - zoomArea.height * scale))
];

Answer 2

从文档https://github.com/d3/d3-zoom#zoom_transform

此方法要求您指定新的缩放变换完全，并且不强制执行定义的比例范围和翻译范围（如果有）

d3.zoomIdentity.translate（）。scale（）不尊重d3.zoom（）。translateExtent（）

2 个答案: