在 D3 地理方位角上制作圆形剪辑动画

Animating circle clip on D3 Geo Azimuthal

本文关键字：动画 D3 方位角      更新时间：2023-09-26

我正在搞砸d3.geo.azimuthal的一个版本，如下所示：http://mbostock.github.io/d3/talk/20111018/azimuthal.html

我有一个导航到特定大陆的链接列表。每个都调用一个自定义函数 navigateGlobe，其中包含有关移动到何处的信息。

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

刷新函数与源示例中相同，如下所示：

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

在运行 navigateGlobe 时，它可以正常工作，投影平滑地过渡到所需的位置和比例，但是在鼠标下一次移动地球之前，裁剪圆圈不会更新。我知道剪辑是由圆圈完成的，以隐藏地球一侧背对用户的国家，所以我改变了我的功能：

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());

我将尝试设置一个小提琴作为出错的示例。谢谢！

不幸的是，这是一个 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）决定。总数需要与其他转换相同。

这实际上是有效的，基于所有建议，使用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);
相关文章：