D3 Geo Azimuthal上的动画圆形剪辑

Question

I'm messing around with a version of d3.geo.azimuthal as seen here: http://mbostock.github.io/d3/talk/20111018/azimuthal.html

I have a list of links that navigate to particular continents. These each call a custom function navigateGlobe with info on where to move to.

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

The refresh function is the same as in the source example, and looks like this:

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

On running navigateGlobe, it works correctly and the projection smoothly transitions to the required location and scale, however the clipping circle would not be updated until the next move of the globe by the mouse. I know that the clipping is done by the circle, to hide countries on the side of the globe facing away from the user, so I altered my function:

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

The clipping circle now updates but does so immediately, ie the destination clipping point is reached on step 1 of animation. I would like to know if there's a way of transitioning the clipping circle at the same rate as the projection so that the entire animation looks smooth.

For reference, again as in the source example, var circle is set up as:

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

I will try to set up a fiddle as an example of what is going wrong. Thanks!

Answer 1

Unfortunately, this is an example where D3's transitions fall a bit short -- you can't really transition just values. You can set up your own easing function, but you'll need to call it manually with the right values.

To do this, you would set up an interpolation function between the old and new origins. Then, you would call navigateGlobe with intermediate origins recursively with setTimeout in the following fashion.

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

The duration of this transition is determined by the number of iterations (here 10) and the timeout value for the recursive call (here 10ms, ie total 100ms). The total would need to be the same as for your other transition.

Answer 2

this actually works, based on all what's been suggested, using 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);