CODEWITHSUNDEEP
svgmapsd3.jsgisgeojson
fccoelho
fccoelho

Reputation: 6204

Why am I getting an array of NANs when trying to plot a map with D3.js?

I am tring to plot a map with d3.js using GeoJSON, but the paths generated look like this:

<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">

the code and data are in this Gist: https://gist.github.com/4157853

I can load the data just fine on QGIS.

Does any one know what is causing this?

Upvotes: 0

Views: 1785

Answers (2)

nautat
nautat

Reputation: 5233

The way you have specified the offset in the Mercator projection doesn't seem right. The projection.translate method expects a two element array:

https://github.com/mbostock/d3/wiki/Geo-Projections#wiki-mercator_translate

So instead of:

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

you would need to say:

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

-- edit --

See source of projection.translate: https://github.com/mbostock/d3/blob/3.0/src/geo/projection.js#L139

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

If the argument _ is not an array then +_[0] will return a NaN and therefore the x and y will become NaNs. (This is because trying to get one element from a number (e.g. 213[0]) returns undefined and casting undefined to a number (e.g. +undefined) yields NaN.)

Upvotes: 3

seb
seb

Reputation: 4096

If the code you posted in the gist is everything you're trying to run, then the data you show in data.json is not being loaded anywhere. Anyway, your draw function is acting on the data defined by the variable map (line 16), which refers to a simulation variable which isn't set anywhere. And even if it did, line 34 then refers to a features property of the object passed in as json, which map does not have.

In summary, you need to pass the JSON you posted in the gist to your draw function. Then it might well work. If you don't pass in valid data to the d3 SVG helpers, you'll get a bunch of NaN out.

Upvotes: -1

Related Questions