D3 V4 缩放以使用流式投影在画布中显示

Posted 2023-03-23

【中文标题】D3 V4 缩放以使用流式投影在画布中显示

【英文标题】：D3 V4 zoom to feature in canvas with stream projection

【发布时间】：2017-07-22 13:16:19

【问题描述】：

我正在尝试缩放以适应画布中的流式投影中的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

有没有人知道为什么变焦被破坏了？ 感谢您的帮助。

【参考方案1】：

解决了！

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

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