D3 V4は、ストリーム投影によるキャンバスの機能に拡大します。

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 
) 
}

ストリーム投影システムここ@mbostockブロックhttps://bl.ocks.org/mbostock/7755778

のフォークをテストする私のブロックである> http://blockbuilder.org/Lacroute/af1b46da4cb4579f93986b0119635ec2

誰もが持っていなぜズームが壊れているのか？助けてくれてありがとう。

出典

2017-03-02 George Abitbol