d3.js：为什么d3.geo.path（）会给出NaN？

我试图用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"

然而，质心计算似乎运行良好（绘制这些点在地图上显示）

---

你知道为什么NaN出现在为我的LineString生成的路径的末尾吗？

这里的问题是你要投影两次lat/lon坐标。

path（）；
path.centroid（）
方法还需要lat/lon几何体，并生成基于像素的投影

因此，当您在
[path.centroid（…），path.centroid（…）]
上调用
path
时，您正在尝试投影已投影的坐标。因为像素坐标-245的y位置超出了经度值的界限，所以得到的是
NaN

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

var line = d3.svg.line();
line([path.centroid(source_country), path.centroid(target_country)]);

这里的问题是，要投影两次纬度/经度坐标。
path（）；
path.centroid（）
方法还需要lat/lon几何体，并生成基于像素的投影

因此，当您在
[path.centroid（…），path.centroid（…）]
上调用
path
时，您正在尝试投影已投影的坐标。因为像素坐标-245的y位置超出了经度值的界限，所以得到的是
NaN

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

var line = d3.svg.line();
line([path.centroid(source_country), path.centroid(target_country)]);

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

对于遇到问题的任何人：

坐标的格式必须正确。e、 g.对于类型
多边形
，坐标必须具有三级嵌套数组。e、 g.
[[1,2]，[2,3]]


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


您可以检查错误结果的详细内容，例如
M…L…Z…
，并找出错误所在


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

对于遇到问题的任何人：

坐标的格式必须正确。e、 g.对于类型
多边形
，坐标必须具有三级嵌套数组。e、 g.
[[1,2]，[2,3]]


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


您可以检查错误结果的详细内容，例如
M…L…Z…
，并找出错误所在


这看起来完全是正确的答案，但我还没有机会尝试一下。我会尽快接受答案。感谢@nrabinowitz的回复！这看起来完全是正确的答案，但我还没有机会尝试一下。我会尽快接受答案。感谢@nrabinowitz的回复！