如何在d3 js中進行地圖重投影的平滑過渡

Question

我想在我正在構建的迷你應用程序中進行alber / orthographic之間的平滑過渡，就像這個例子：

http://mbostock.github.io/d3/talk/20111018/#27

看起來這個平滑過渡在v3中被破壞了，但是地圖路徑的過渡相當不穩定：

https://www.evernote.com/shard/s236/sh/46b002bd-9c5b-4e9b-87ef-270c303eb677/2eaeebb267a3fc59df5a8447bbbcc58b/res/37917835-5aad-4509-b534-31a3e3034762/Worst_Tornado_Outbreaks_of_All_Time-20130611-074050.jpg.jpg？ resizeSmall＆寬度= 832

代碼很簡單，我將地圖初始化為albers，然后運行ortho（）來更新它。

function ortho() {
  var self = this, 
    h = 1000,
    w = document.width;

  this.projection = d3.geo.orthographic()
    .scale(500)
    .translate([ (w - 300) / 2, h / 2])
    .clipAngle(90)
    .rotate([90, 0, 0])
    .precision(.1);

  this.path = d3.geo.path()
    .projection(this.projection);

  //update path WITH transition
  d3.selectAll('path')
    .transition()
    .duration(900)
    .attr('d', app.path);

}

地圖從阿爾伯特變為拼寫，但過渡並不順利。 任何想法都會很棒。

Answer 1

如果使用D3的初始字符串插值器（ d3.interpolateString ）插入路徑，則起始路徑中的坐標數和結束路徑中的坐標數必須完全匹配，包括相同的順序。 但由於削減，切割和重新采樣 ，這幾乎不是這種情況。 形狀插值是可能的（使用多種 策略 ），但在一般情況下這是一個難以解決的問題。 為什么天真插值不充分，請參閱此解釋 （ 路徑轉換的一部分）。

您需要插入投影，而不是插入路徑。 插值投影不需要坐標之間的精確對應，因此避免了插值偽像。 請參閱以下示例進行演示：

• http://bl.ocks.org/mbostock/5731632
• http://bl.ocks.org/mbostock/3711652
• http://www.jasondavies.com/maps/transition/

如第一個示例所示，這是您可以使用的實現：

function interpolatedProjection(a, b) {
  var projection = d3.geo.projection(raw).scale(1),
      center = projection.center,
      translate = projection.translate,
      α;

  function raw(λ, φ) {
    var pa = a([λ *= 180 / Math.PI, φ *= 180 / Math.PI]), pb = b([λ, φ]);
    return [(1 - α) * pa[0] + α * pb[0], (α - 1) * pa[1] - α * pb[1]];
  }

  projection.alpha = function(_) {
    if (!arguments.length) return α;
    α = +_;
    var ca = a.center(), cb = b.center(),
        ta = a.translate(), tb = b.translate();
    center([(1 - α) * ca[0] + α * cb[0], (1 - α) * ca[1] + α * cb[1]]);
    translate([(1 - α) * ta[0] + α * tb[0], (1 - α) * ta[1] + α * tb[1]]);
    return projection;
  };

  delete projection.scale;
  delete projection.translate;
  delete projection.center;
  return projection.alpha(0);
}

使用兩個投影a和b創建插值投影，然后將插值alpha設置為0（對於a ）和1（對於b ）之間的值。