如何在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,然后经内插的α设定为值介于0(为a)和1(对b).