D3 Geo Azimuthal上的动画圆形剪辑

Question

我在弄乱d3.geo.azimuthal的版本，如下所示： http ://mbostock.github.io/d3/talk/20111018/azimuthal.html

我有一个导航到特定大洲的链接列表。 它们每个都调用一个自定义函数NavigationGlobe，其中包含要移动到的位置的信息。

function navigateGlobe(orig, scal) {
    projection.origin(orig);
    projection.scale(scal);
    refresh(1500);
}

刷新功能与源示例中的相同，如下所示：

function refresh(duration) {
    (duration ? feature.transition().duration(duration) : feature).attr("d", clip);
}

在运行navigationGlobe时，它可以正常工作，并且投影会平滑过渡到所需的位置和比例，但是，直到鼠标下一次移动地球时，裁剪圆才会更新。 我知道剪裁是通过圆圈完成的，以隐藏地球远离用户的一面的国家，因此我更改了功能：

function navigateGlobe(orig, scal) {
    projection.origin(orig);
    projection.scale(scal);
    circle.origin(orig); // Need to animate this!
    refresh(1500);
}

剪切圆现在会更新，但会立即更新，即在动画的步骤1上达到了目标剪切点。 我想知道是否有一种以与投影相同的速率过渡剪切圆的方法，以使整个动画看起来很平滑。

作为参考，再次如源示例中所示，将var circle设置为：

var circle = d3.geo.greatCircle()
    .origin(projection.origin());

我将尝试设置一个小提琴，以作为发生问题的示例。 谢谢！

Answer 1

不幸的是，这是一个示例，其中D3的转换有些短-您不能真正转换仅值。 您可以设置自己的缓动函数，但需要使用正确的值手动调用它。

为此，您需要在新旧原点之间设置插值功能 。 然后，你会打电话navigateGlobe与中间起源递归地setTimeout下面的方式。

var interpolator = d3.interpolate(...);
var iters = 10;
function setNewOrigin(count) {
    setTimeout(function() {
        navigateGlobe(interpolator(count/iters));
        if(count < iters) setNewOrigin(count + 1);
    }, 10);
}
setNewOrigin(1);

此过渡的持续时间由迭代次数（此处为10）和递归调用的超时值（此处为10ms，即总计100ms）确定。 总数必须与您的其他过渡相同。

Answer 2

实际上，根据所有建议，使用requestAnimationFrame

    var o = projection.origin();

    var si = d3.interpolate(projection.scale(), SCALE);
    var xi = d3.interpolate(o[0], -58.4459789 +10);
    var yi = d3.interpolate(o[1], -34.612869   -4); // buenos aires -4°

    function xanimate (fn, time) {
        var start = null;

        function step(timestamp) {
            var progress;
            if (start === null) start = timestamp;
            progress = timestamp - start;
            var p = progress / time;
            fn (p);
            if (progress < time) {
                requestAnimationFrame(step);
            }
        }

        requestAnimationFrame(step);
    }

    function navigateGlobe(orig, scal) {
        projection.origin(orig);
        projection.scale(scal);
        circle.origin(orig); // Need to animate this!
        refresh();
    }

    xanimate (function (t) {
        navigateGlobe ([xi(t), yi(t)], si(t));
    }, 2000);