Question

我正在尝试使用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生成的路径末尾的任何想法？

Answer 1

这里的问题是你要两次投射纬度/经度坐标。 path()运算符期望将lat / lon和project投影到像素; path.centroid()方法也需要lat / lon几何，并且还会生成基于像素的投影。

因此，当您在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)]);

Answer 2

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

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

坐标格式必须正确。例如对于 Polygon 类型，坐标必须具有 3 级嵌套数组。例如[[[1,2],[2,3]]]
坐标必须是浮点数/整数，而不是字符串（例如 1 正确，"1" 错误）
您可以查看错误结果的详细内容，例如M...L...Z... 并找出错误所在。

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

2 个答案: