Using d3 How can I create a smooth transition on my globe animation?

Question

I'm using D3.js, Javascript and specifically the function d3.geoOrthographic to create the globe.

I've created a globe and now i am trying to rotate it to certain countries. eg starts in the "UK" then rotates to "China"

I am doing this on an interval by.

d3.interval( () => {
    projection.rotate(coOrdinates)

    path = d3.geoPath().projection(projection)
    map.selectAll("path")
      .attr("d", path)
})

it works which is great however the transition to the country is instant, it isn't smooth.

How can i include a smooth transition to each country?

Answer 1

You can create a transition and tween the rotate attribute, with d3.interpolate :

d3.transition()
  .duration(1000)
  .tween("rotate", function() {
    const r = d3.interpolate(point, coOrdinates);
    return function(t) {
      projection.rotate(r(t));
    };
  })

where point is the point you're rotating from.