Блог

Я использую D3.js , Javascript и, в частности, функция d3.geoOrthographic для создания глобуса.

Я создал глобус, и теперь я пытаюсь повернуть его в определенные страны. например, начинается с «Великобритании», затем поворачивается на «Китай»

Я делаю это с интервалом в.

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

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

это работает, и это здорово, однако переход к стране происходит мгновенно, он не является плавным.

Как я могу включить плавный переход в каждую страну?

Вы можете создать переход и tween rotate атрибут с d3.interpolate :

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

где point находится точка, из которой вы вращаетесь.