错误：<path> 属性的值无效 -- 在 d3 投影转换期间 -- 无穷大和 NaN

Posted 2023-02-22

【中文标题】错误：<path> 属性的值无效 -- 在 d3 投影转换期间 -- 无穷大和 NaN

【英文标题】：Error: Invalid value for <path> attribute -- During a d3 Projection Transition -- Infinity & NaN

【发布时间】：2015-08-05 00:25:14

【问题描述】：

我正在研究世界交互式地图（缩放 + 拖动）上正交投影和墨卡托投影之间的过渡。我的尝试基于@mbostock 的this answer。我的过渡效果很好，但控制台返回：

错误：属性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.571665201377L411.4470970198755 ...，NaNL415 ，Nanl415， Nanzm415，Nanl415，Nanl415，Nanzm415，Nanl415，449.0295187376795189993978805,449999939895,4115,449.0295,4115,449.0295,4115,449.0295,415,449.0295,4115,449.0295,4117677,0295187379393188999993931845,41173961845,41193739618499993931845,41193739611879999795,44999959.03895,411198778。

我使用的是 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;

有什么想法吗？

【问题讨论】：

您确定不是您的路径中出现infinity 是问题所在，在计算过程中似乎出现了问题？

@adeneo 我绝对同意。我认为“原始”功能出了点问题。但我不确定如何解决它。

【参考方案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);

我还在 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);
      ;
    );