[英]Error: Invalid value for <path> attribute — During a d3 Projection Transition — Infinity & NaN
我正在研究世界互動地圖(縮放+拖動)上的正交投影和墨卡托投影之間的過渡。 我根據@mbostock的答案做出了嘗試。 我的過渡效果很好,但是控制台返回了以下內容:
錯誤:屬性d的值無效=“ M399.97994119370463,631.2543931983346L401.90905516286807,634.6157013775801L402.49382423943246,639.8924592362391L397.1999166487309,......., InfinityL492,InfinityL298.23496934976544,InfinityZ ”
也
錯誤:屬性d =“ M407.5277462873383,448.4656515493841L407.3237573717514,448.5198670656254L408.0599991645186,448.54332648718287L408.0215749188842,448.4385574971469ZM410.40575858016456,448.5990104765492L410.8017911794915,448.571415 NaNZM415,NaNL415,NaNL415,NaNZM415,NaNL415,449.0295187376797L415,449.0295187376797L414.9999381778805,449.02952802059315L415,449.02952802059315L414.41200773961845 。”。
我使用的是Natural Earth shapefile中的topoJson,每次返回補間函數時,我只會收到這些路徑錯誤之一。 我相信這意味着只有一個路徑元素存在此問題。
這是我在投影類中擁有的轉換方法:
animation(timeout, newProjection) {
let self = this;
let projection = this.interpolatedProjection(this.prjFnc, newProjection);
let path = d3.geo.path().projection(projection);
this.svg.transition()
.duration(timeout / 2)
.tween('projection', function() {
return function(_) {
self.alpha(_);
self.svg.selectAll('path').attr('d', path);
};
});
}
interpolatedProjection(a, b) {
let self = this;
this.a = a;
this.b = b;
this.α = null;
function raw(λ, φ) {
let pa = self.a([λ *= 180 / Math.PI, φ *= 180 / Math.PI]), pb = self.b([λ, φ]);
return [(1 - self.α) * pa[0] + self.α * pb[0], (self.α - 1) * pa[1] - self.α * pb[1]];
}
this.intProjection = d3.geo.projection(raw).scale(1);
this.center = this.intProjection.center;
this.translate = this.intProjection.translate;
delete this.intProjection.scale;
delete this.intProjection.translate;
delete this.intProjection.center;
return this.alpha(0.1);
}
alpha(_) {
if(!arguments.length) {
return this.α;
}
this.α = +_;
let ca = this.a.center(),
cb = this.b.center(),
ta = this.a.translate(),
tb = this.b.translate();
this.center(
[(1 - this.α) * ca[0] + this.α * cb[0],
(1 - this.α) * ca[1] + this.α * cb[1]]
);
this.translate(
[Math.round((1 - this.α) * ta[0] + this.α * tb[0]),
Math.round((1 - this.α) * ta[1] + this.α * tb[1])]
);
return this.intProjection;
}
有什么想法嗎?
無限誤差是由嘗試在svg外部繪制的路徑引起的。 通過將Clip Extent添加到插值投影中,我能夠消除這些錯誤。
interpolatedProjection(a, b) {
let self = this;
this.a = a;
this.b = b;
this.α = null;
function raw(λ, φ) {
let pa = self.a([λ *= 180 / Math.PI, φ *= 180 / Math.PI]), pb = self.b([λ, φ]);
return [(1 - self.α) * pa[0] + self.α * pb[0], (self.α - 1) * pa[1] - self.α * pb[1]];
}
this.intProjection = d3.geo.projection(raw).scale(1)
.clipExtent(this.extent); // this addition
this.center = this.intProjection.center;
this.translate = this.intProjection.translate;
delete this.intProjection.scale;
delete this.intProjection.translate;
delete this.intProjection.center;
return this.alpha(0.1);
}
我還在d屬性中收到一個NaN錯誤,通過不讓補間索引達到1可以刪除該錯誤。
animation(timeout, newProjection) {
let self = this;
let projection = this.interpolatedProjection(this.prjFnc, newProjection);
let path = d3.geo.path().projection(projection);
this.svg.transition()
.duration(timeout)
.tween('projection', function() {
return function(_) {
if (_ === 1) { return; } // This addition
self.alpha(_);
self.paths.attr('d', path);
};
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.