使用 d3 如何在我的地球動畫上創建平滑過渡？

Question

我正在使用 D3.js、Javascript，特別是函數d3.geoOrthographic來創建地球。

我已經創建了一個地球儀，現在我正在嘗試將其旋轉到某些國家/地區。 例如從“英國”開始然后輪換到“中國”

我每隔一段時間就這樣做。

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

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

它很有效，但是向該國的過渡是即時的，並不順利。

我怎樣才能順利過渡到每個國家？

Answer 1

您可以創建一個過渡和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是您旋轉的起點。