StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAnimating circle clip on D3 Geo Azimuthal
text
Body
copied!<p>I'm messing around with a version of d3.geo.azimuthal as seen here: <a href="http://mbostock.github.io/d3/talk/20111018/azimuthal.html" rel="nofollow">http://mbostock.github.io/d3/talk/20111018/azimuthal.html</a></p> <p>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.</p> <pre><code>function navigateGlobe(orig, scal) { projection.origin(orig); projection.scale(scal); refresh(1500); } </code></pre> <p>The refresh function is the same as in the source example, and looks like this:</p> <pre><code>function refresh(duration) { (duration ? feature.transition().duration(duration) : feature).attr("d", clip); } </code></pre> <p>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:</p> <pre><code>function navigateGlobe(orig, scal) { projection.origin(orig); projection.scale(scal); circle.origin(orig); // Need to animate this! refresh(1500); } </code></pre> <p>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.</p> <p>For reference, again as in the source example, var circle is set up as:</p> <pre><code>var circle = d3.geo.greatCircle() .origin(projection.origin()); </code></pre> <p>I will try to set up a fiddle as an example of what is going wrong. Thanks!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload