javascript - D3 : zoom to bounding box with d3-tiles

Question

我已经成功地将 D3(矢量) map 分层放置在从 Mapbox 中提取图 block 的 d3-tile(光栅) map 之上。手动缩放效果完美，矢量和光栅同步。

我现在正在尝试实现 Mike Bostock ' zoom-to-bounding-box ' 功能，应用程序可在用户单击时放大所需的国家/地区。我想我快到了，但现在似乎不匹配，可以这么说， map 缩小到外太空。

我在这个 jsfiddle 中重现了这个问题.

我需要在“缩放”功能中进行哪些修改才能使 map 按预期正确缩放？我认为这就是问题所在:

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

Answer 1

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

使用常量投影

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

放大后，你有这条线:

projection.scale...

您似乎正在尝试根据缩放更新投影，但平移和缩放已由 svg 元素的 transform 属性处理。

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

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

移除限制和投影更新应该让您点击缩放国家。但我们还没有完成!

另一个问题是您的reset 函数不会重置为原始 View ，这会使其缩小到远处。使用初始缩放设置而不是 d3.zoomIdentity 解决了这个问题。

这些编辑的结果在这里:https://jsfiddle.net/m7cn0p47/99/

可选:合并转换

更改许多 DOM 节点通常效率很低。在这种情况下，您将更改 zoomed 中的每个路径向量。将转换应用于一个 g 元素(在本例中为 ID 为 vector 的 g 元素)通常效率更高。

代替:

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

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

这是包含这些更改和更正的更新 fiddle :https://jsfiddle.net/m7cn0p47/96/