Svg 为什么我在尝试用D3.js绘制地图时会得到一个NaN数组？

我尝试使用GeoJSON用d3.js绘制地图，但生成的路径如下所示：

<path d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,‌​NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,N‌​aNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,Na‌​NLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaN‌​LNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNL‌​NaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLN‌​aN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNZ">

代码和数据在此要点中：

我可以在QGIS上加载数据

---

有人知道这是什么原因吗？

如果您在gist中发布的代码就是您试图运行的所有代码，那么您在

data.json

中显示的数据不会被加载到任何地方。无论如何，您的

draw

函数作用于变量

map

（第16行）定义的数据，该变量指的是未在任何位置设置的

模拟

变量。即使是这样，第34行也引用了作为json传入的对象的

features

属性，而

map

没有

---

总之，您需要将gist中发布的JSON传递给draw函数。那么它可能会起作用。如果您没有将有效数据传递给d3 SVG帮助程序，您将得到一堆

NaN

。

在墨卡托投影中指定偏移量的方式似乎不正确。projection.translate方法需要两个元素的数组：

因此，不是：

proj.translate(-43.8,-23.2).scale(10);

你需要说：

proj.translate([-43.8,-23.2]).scale(10);

--编辑--

请参见projection.translate的来源：

---

如果参数

不是数组，则

+\u0]

将返回一个

NaN

，因此

x

和

y

将变为

NaN

s。（这是因为尝试从一个数字（例如213[0]）中获取一个元素会返回

undefined

，将

undefined

转换为一个数字（例如+undefined）会产生

NaN

）

，显然，这不是全部。这是web应用程序的一部分，如果仔细观察，您会发现插入JSON的地方有一个模板标记。我已经修改了要点并添加了最终生成的HTML，以便您可以检查JSON。为了进一步消除任何疑问，我可以检查firebug中的变量映射，并看到它实际上被解释为具有预期结构的对象。为什么它不解释NaN？投影函数参与将GeoJSON结构转换为路径字符串；因此，如果配置错误，将对路径字符串产生影响。将偏移量参数更改为2元素数组时发生了什么？当我接受您的代码并进行这些更改时，它生成了有效的路径；在您的情况下，它没有？请在编辑的答案中查看更多详细信息，为什么您在字符串中看到NaN。抱歉，修复translate参数确实会生成有效路径，但它们仍然不可见@nautat，你把地图弄清楚了吗？我希望我现在更接近了，但这个错误仍然会产生一个异常，并且maps应该在d3.js上有一个autocenter（）方法

  projection.translate = function(_) {
    if (!arguments.length) return [x, y];
    x = +_[0];
    y = +_[1];
    return reset();
  };