2

我正在尝试使用 d3 进行一些在线映射，但是当我尝试在两点之间绘制一条线时遇到了问题。

我已经计算了两个多边形（源和目标）的质心

在代码中：

var projection = d3.geo.mercator()
    .scale(width)
    .translate([0, 0]);

var path = d3.geo.path()
    .projection(projection);

从 JS 控制台：

> path({type: "LineString",
      coordinates: [path.centroid(source_country), path.centroid(target_country)]});

"M277.05056877663407,121.67976219138909L-694.1792414247936,NaN"

然而，质心计算似乎工作正常（绘制这些点在地图上显示它们）

> [path.centroid(source_country), path.centroid(target_country)]

[
Array[2]
0: 103.89396329123777
1: -41.453727169465765
length: 2
__proto__: Array[0]
, 
Array[2]
0: -260.3172155342976
1: -245.57309459883245
length: 2
__proto__: Array[0]

任何想法为什么 NaN 出现在为我的 LineString 生成的路径的末尾？

4

2 回答 2

4

这里的问题是您要投影纬度/经度坐标两次。path()操作员期望采用纬度/经度并投影到像素；该path.centroid()方法还需要一个纬度/经度几何，并且还产生一个基于像素的投影。

因此，当您调用path时[path.centroid(...), path.centroid(...)]，您正在尝试投影已经投影的坐标。NaN因为像素坐标的 y 位置 -245 超出了经度值的范围，所以您得到了。

解决此问题的最简单方法可能是使用d3.svg.line创建质心-质心路径。我没有对此进行测试，但我认为它看起来像：

var line = d3.svg.line();
line([path.centroid(source_country), path.centroid(target_country)]);
于 2012-11-20T17:58:06.007 回答
0

好的，刚才我遇到了同样的错误，

对于遇到 NAN 问题的任何人：

  1. 坐标格式必须正确。例如对于 type Polygon，坐标必须有一个 3 级嵌套数组。例如[[[1,2],[2,3]]]

  2. 坐标必须是浮点数/整数，但不能是字符串（例如1正确、"1"错误）

  3. 您可以查看错误结果的详细内容，例如M...L...Z...找出错误在哪里。

于 2021-05-08T08:14:42.337 回答