Issue with D3 Smooth Zoom in of globe on click of plot

Question

I have created D3 globe. I am stuck in issue, right now on click on plot, Map zoom in but it is not smooth zoom in. I need to zoom in map with smooth transition. 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

Your rotate is transistioning because of this:

.rotate(r(t))

Where r is an interpolate function and t is the current step in the transition. It looks like your scale though:

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

is just set to the same value at every step in the transition.

You need to set up a separate interpolate function for the scale:

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

Then, use this in your transition:

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