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

【问题标题】：Issue with D3 Smooth Zoom in of globe on click of plot单击绘图时 D3 平滑放大地球的问题
【发布时间】：2016-11-18 14:53:15
【问题描述】：

我已经创建了 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);
         }
  });

【问题讨论】：

点击没有放大效果。
请检查它的工作情况
projectsdemo.net/globe/v4
不，这里什么都没有发生。
当它在我的浏览器中工作时，请您进行硬刷新或清除浏览缓存

标签： animation d3.js svg zooming webgl-globe

【解决方案1】：

因此，您的轮换正在转换：

.rotate(r(t))

其中r 是一个插值函数，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))
  ...

【讨论】：