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

时间:2015-03-07 20:44:51

标签: javascript d3.js

我举了一个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。这些记录到控制台。

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

1 个答案:

答案 0 :(得分:0)

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

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

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

希望它会对你有所帮助。