D3：使用 d3-tile 缩放到边界框

我已成功将 D3（矢量）地图分层到从 Mapbox 提取图块的 d3-tile（光栅）地图之上。手动缩放效果非常好，矢量和光栅都是同步的。

我现在正在尝试实施迈克·博斯托克'缩放到边界框 https://bl.ocks.org/mbostock/4699541”功能，应用程序可在用户单击时放大所需的国家/地区。我想我已经快到了，但现在似乎存在不匹配，可以说地图缩小到了外太空。

我已经在这个中重现了这个问题jsfiddle https://jsfiddle.net/Guill84/m7cn0p47/1/.

我需要在“缩放”功能中修改哪些内容，以便地图按预期正确缩放？我认为问题就出在这里：

  vector.selectAll("path")
    .attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
    .style("stroke-width", 1 / transform.k);

Edit: 看起来主要问题只是投影的更新

使用恒定投影

这里的主要问题是您要根据缩放来更改投影并从中计算边界框。

放大后，你会看到这一行：

projection.scale...

看起来您正在尝试根据缩放来更新投影，但是平移和缩放已经由transformsvg 元素的属性。

相反，投影用于将球面地理坐标转换为二维空间。它用于计算一个国家/地区的边界，如果它发生变化，边界就会移动，这可能是无意的。删除此投影更新可以让您顺利完成大部分工作。

另一个大问题是，您将点击处理程序中的比例限制为远低于您需要的值（例如，您将比例限制为最大值 8，但初始比例为 4096）。

移除夹子和投影更新应该可以让您点击缩放国家/地区。但我们还没有完成！

另一个问题是你的reset功能不会重置为原始视图，这会使其缩小到远处。使用初始缩放设置而不是d3.zoomIdentity解决问题。

这些编辑的结果如下：https://jsfiddle.net/m7cn​​0p47/99/ https://jsfiddle.net/m7cn0p47/99/

可选：合并转换

更改许多 DOM 节点通常效率很低。在这种情况下，您将更改中的每个路径向量zoomed。将变换应用到一个g元素（在本例中为g带有 id 的元素vector) 相反通常更有效。

代替：

vector.selectAll("path")
  .attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
  .style("stroke-width", 1 / transform.k);

您可以将其更改为简单的：

vector
  .attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
  .style("stroke-width", 1 / transform.k);

您还必须删除stroke-width来自 CSS 中的路径，因为它会覆盖它。

以下是这些更改和更正的更新：https://jsfiddle.net/m7cn​​0p47/96/ https://jsfiddle.net/m7cn0p47/96/