单击绘图时 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))

其中 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))
  ...

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

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

animation

svg

zooming

d3.js

webgl-globe