1
feature에 맞도록 확대/축소하려고합니다. 이미 select a feature 일 수는 있지만 확대 할 수는 없습니다.D3 V4 캔버스에서 스트리밍 투영을 사용하여 확대/축소
이 방법은 간단하며 기능을 검색하고 중심점을 계산 한 다음이 시점으로 확대/축소 전환을 적용합니다.
코드의 매우 sumarized 조각 :
// 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
)
}
스트림 프로젝션 시스템은 여기에
https://bl.ocks.org/mbostock/7755778 사람이 있습니까> http://blockbuilder.org/Lacroute/af1b46da4cb4579f93986b0119635ec2
을 테스트하는 내 블록 @mbostock 블록의 포크입니다 왜 줌이 망가 졌는지에 대한 아이디어? 도움 주셔서 감사합니다.