javascript - 缩放到 D3 Canvas 中的任意特征

Question

我以Mike Bostock's D3 zoom transitions in canvas为例.在尝试设置没有魔数(Magic Number)(via this post)的投影后，我仍然无法动态放大任意特征。我创建了一个示例 jsfiddle在底部有一系列按钮对应于 geojson 功能。

它有一个名为 onClick 的函数，它带有一个特征。我正在尝试计算平移和缩放，然后更新 zoomTo，最后调用 zoom transition 以缓和进入边界框。

function onClick(state) {
  console.log('zoom transition to state: ', state);

  var bounds = path.bounds(state),
      dx = bounds[1][0] - bounds[0][0],
      dy = bounds[1][4] - bounds[0][5],
      x = (bounds[0][0] + bounds[1][0]) / 2,
      y = (bounds[0][6] + bounds[1][7]) / 2,
      scale = .9 / Math.max(dx / width, dy / height),
      translate = [width / 2 - scale * x, height / 2 - scale * y];

  console.log('bounds', bounds);
  console.log('scale', scale);
  console.log('translate', translate);

  // var locaction = getLocation(state);
  // var scale = getScale(state);

  // transition and zoom to state.
  // zoomTo(location, scale);
}

其他缩放示例(如“缩放到边界框”)不太适合这种情况。我们不是渲染到 SVG 并使用 transform 之类的 svg 属性，而是渲染到 Canvas 。 path 完全能够呈现到 HTML canvas，但请注意 path 函数是高度自定义的，具有自己的投影。实际上，尝试使用 bounds 来查找边界框将返回 NaN, NaN。这些记录到控制台。

成功就是能够点击一个状态并观看它平滑地放大。

Answer 1

我遇到了同样的问题，这里有两种解决方案:

• 缩放到质心> https://bl.ocks.org/Fil/a8cfbbfd0100d38241beb48d23c9d4d1
• 缩放到边界框> https://bl.ocks.org/lacroute/af1b46da4cb4579f93986b0119635ec2

困难在于找到一个特征，然后计算边界以最终更新缩放行为。

解决方案是使用 path.bounds 计算边界，因为我们在 topojson 中使用了支持投影，然后使用 projection.invert 将其转换为纬度/经度将其应用于缩放。

希望对你有所帮助。