Problem mit D3 Smooth Zoom von Globus bei Klick auf Plot

Question

Ich habe D3 Globus erstellt. Ich stecke in Problem, gerade jetzt auf klicken Sie auf Grundstück, Karte zoomen, aber es ist nicht glatt zoomen. Ich brauche Karte mit fließenden Übergang zu zoomen. http://projectsdemo.net/globe/v4/

globe.focus = function(d, k) { d3.selectAll('.globe').transition() 
    .duration(2000) 
    .tween("transform", function() { 
    var centroid = d3.geo.centroid(d); 
    var r = d3.interpolate(projection.rotate(), [-centroid[0], -centroid[1], 0]); 
    return function(t) { 
     //projection.rotate(r(t)); 
     pathG.selectAll("path").attr("d", path); 
     var clipExtent = projection.clipExtent(); 
     //projection.scale(1).translate([0, 0]).clipExtent(null); 
     //var b = path.bounds(d); 
     var minScale = 270, 
     maxScale = minScale * 5; 
     projection.rotate(r(t)).scale(Math.max(minScale, Math.min(maxScale, k))) 
      .translate([width/2, height/2]) 
      .clipExtent(clipExtent); 
     } 
    }); 

Answer 1

Ihre drehen, da dies wird transistioning:

.rotate(r(t)) 

Wo r ist eine Interpolations-Funktion und t ist der aktuelle Schritt im Übergang. Es sieht jedoch wie Ihre Skala:

.scale(Math.max(minScale, Math.min(maxScale, k))) 

ist nur auf den gleichen Wert bei jedem Schritt im Übergang festgelegt.

Sie benötigen eine separate interpolieren Funktion für die Waage einzurichten:

var r = d3.interpolate(projection.rotate(), [-centroid[0], -centroid[1], 0]), 
    r2 = d3.interpolate(project.scale(), Math.max(minScale, Math.min(maxScale, k))); 

Dann verwenden Sie diese in Ihrem Übergang:

projection.rotate(r(t)) 
    .scale(r2(t)) 
    ...