我想在我正在构建的迷你应用中进行alber / orthographic之间的平滑过渡,就像这个例子:
http://mbostock.github.io/d3/talk/20111018/#27
看起来这个平滑的过渡在v3中被打破了,但地图路径的过渡相当不稳定:
代码很简单,我将地图初始化为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);
}
地图从相册变为拼写,但转换不顺畅。任何想法都会很棒。
答案 0 :(得分:17)
如果使用D3的初始字符串插值器(d3.interpolateString)插入路径,则起始路径中的坐标数和结束路径中的坐标数必须完全匹配,包括相同的顺序。但由于clipping, cutting和resampling,这几乎不是这种情况。 Shape interpolation是可能的(使用multiple strategies),但在一般情况下要解决这个难题。有关天真插值不足的原因,请参阅this explanation(Path Transitions的一部分)。
您希望插入投影,而不是插值路径。插值投影不需要坐标之间的精确对应,因此可以避免插值伪影。请参阅以下示例进行演示:
如第一个示例所示,这是您可以使用的实现:
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
的值之间的值)。