Question

我举了一个Mike Bostock's D3 zoom transitions in canvas的例子。尝试设置没有幻数的投影（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属性，而是渲染到画布。 path完全能够呈现到HTML画布，但请注意path函数是高度自定义的，具有自己的投影。实际上，尝试使用bounds找到边界框将会返回NaN，NaN。这些记录到控制台。

成功可以点击状态并观看它平滑放大。

Answer 1

我面临同样的问题，这里有两个解决方案：

缩放到质心＆gt; https://bl.ocks.org/Fil/a8cfbbfd0100d38241beb48d23c9d4d1
放大到边界框＆gt; https://bl.ocks.org/lacroute/af1b46da4cb4579f93986b0119635ec2

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

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

希望它会对你有所帮助。

缩放到D3画布中的任意特征

1 个答案: