D3 V4 缩放以在 canvas 中使用流投影功能

Question

我正在尝试缩放以适应 canvas 中的流式投影中的 feature。我已经可以select a feature，但我无法实现缩放。

方法很简单，检索一个特征，计算他的质心，然后对这一点应用缩放过渡。

一段非常概括的代码：

// variables
var land = topojson.feature(us, us.objects.states)
var minZ // minimum area threshold for simplification

var transform = d3.geoIdentity().clipExtent([[0, 0], [width, height]])
var simplify = d3.geoTransform({
  point: function(x, y, z) { if (z >= minZ) this.stream.point(x, y)}
})

var path = d3.geoPath().projection({
  stream: function(s) { return simplify.stream(transform.stream(s)); }
})
.context(context);

// It's called backedProjection because the topojson is already projected with this
var backedProjection = d3.geoMercator().translate([0, 0]).scale(4000)


// zoom handler 
function zoomed(d) {
  var t = d3.event.transform;
  minZ = 1 / (t.k * t.k);
  transform.translate([t.x, t.y]).scale(t.k);
}


// click handler
function onClick() {
  let target = backedProjection(d3.geoCentroid(land));  

  let selectedTransform = d3.zoomIdentity
    .translate(width / 2, height / 2)
    .scale(0.05)
    .translate(-target[0], -target[1])

  // Apply the new transform
  canvas.transition()
    .duration(750)
    .call(
      zoom.transform,
      selectedTransform
  )
}

流投影系统是@mbostock 块的一个分支https://bl.ocks.org/mbostock/7755778

这是我要测试的块 > http://blockbuilder.org/Lacroute/af1b46da4cb4579f93986b0119635ec2

有谁知道为什么变焦坏了？感谢您的帮助。

Answer 1

已解决！

使用动态简化缩放到质心 > https://bl.ocks.org/Fil/a8cfbbfd0100d38241beb48d23c9d4d1

缩放到动态简化的边界框 > https://bl.ocks.org/lacroute/af1b46da4cb4579f93986b0119635ec2

D3 V4 缩放以在 canvas 中使用流投影功能

D3 V4 zoom to feature in canvas with stream projection

javascript

canvas

geo

d3.js