Ошибка: Недопустимое значение для атрибута <path> - Во время перехода проекции d3 - Infinity & NaN

Question

Я работаю над переходом между проекциями ортогонального и меркатора на интерактивную карту (масштабирование и перетаскивание) мира. Я основал свою попытку от this answer от @mbostock. Мой переход работает хорошо, но консоль возвращает это:

Error: Invalid value for attribute d= "M399.97994119370463,631.2543931983346L401.90905516286807,634.6157013775801L402.49382423943246,639.8924592362391L397.1999166487309,.......,InfinityL492,InfinityL298.23496934976544,InfinityZ"

также

Error: Invalid value for attribute d="M407.5277462873383,448.4656515493841L407.3237573717514,448.5198670656254L408.0599991645186,448.54332648718287L408.0215749188842,448.4385574971469ZM410.40575858016456,448.5990104765492L410.8017911794915,448.571665201377L411.4470970198755...,NaNL415,NaNL415,NaNZM415,NaNL415,NaNL415,NaNZM415,NaNL415,449.0295187376797L415,449.0295187376797L414.9999381778805,449.02952802059315L415,449.02952802059315L414.41200773961845,.."

Я использую topoJson из шейпа Natural Earth, и я только получить одну из этих ошибок в канале для каждого времени функции твина вернулся. Я считаю, что это означает, что только один элемент пути, который имеет эту проблему.

Вот мои методы переходов, которые я в классе проекции:

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; 
} 

Есть мысли?

Answer 1

Ошибки бесконечности были вызваны попытками сделать попытки за пределами svg. Я смог удалить эти ошибки, добавив размер клипа в интерполированную проекцию.

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); 
} 

Я также получал ошибку 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); 
     }; 
    }); 
}