如何在 d3 js 中为地图重投影进行平滑过渡

Posted 2023-03-23

【中文标题】如何在 d3 js 中为地图重投影进行平滑过渡

【英文标题】：How to do smooth transition for map reprojection in d3 js

【发布时间】：2013-06-07 09:42:00

【问题描述】：

我想在我正在构建的一个迷你应用程序中在 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&width=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);

地图从albers变为正交，但过渡并不顺畅。任何想法都会很棒。

【参考方案1】：

如果您使用 D3 的朴素字符串插值器 (d3.interpolateString) 插值路径，则起始路径中的坐标数和结束路径中的坐标数必须完全匹配，包括以相同的顺序。但由于clipping, cutting 和resampling，这种情况几乎不会发生。 Shape interpolation 是可能的（使用multiple strategies），但在一般情况下很难解决。请参阅 this explanation（Path Transitions 的一部分）了解为什么朴素插值不足。

您想要对投影进行插值，而不是对路径进行插值。 对投影进行插值不需要坐标之间的精确对应，因此可以避免插值伪影。请参阅以下示例进行演示：

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）之间的值。

【讨论】：

可以这样插入clipAngle吗？没有一个例子证明了这一点——我正在尝试从 orthographic/90 过渡到 equirectangular/180 并且有很多奇怪的伪影