animation - 单击绘图时 D3 平滑放大地球的问题

Question

我创建了 D3 地球仪。我遇到了问题，现在点击绘图，地图放大但它不是平滑放大。我需要用平滑过渡放大地图。 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

因为这个，你的轮换正在转换：

.rotate(r(t))

wherer是一个插值函数，并且t是转换中的当前步骤。它看起来像你的规模：

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

只是在转换的每一步都设置为相同的值。

您需要为比例设置单独的插值函数：

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

然后，在过渡中使用它：

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