javascript - d3.js 无法解析 "MNaN,NaN"

Question

我正在尝试使用 d3.js 绘制 map ，但我一直收到 Problem parsing d="MNaN,NaN"

    <!-- language: lang-js -->
    var width=960, height=500;
    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
    var q = 0;
    var sc = 3000;
    var d3line2 = d3.svg.line()
                    .x(function(d){q= 0.95105*sc*(d[0]+66.4262);  return q;})
                    .y(function(d){q= sc*(-1*d[1]+ 18.2336);  return q;})
                    .interpolate("linear"); 

    d3.json("/prCounties.json", function(d){

        for(var k = 0; k < d.features[0].length; k++){
            svg.append("path")
            .attr("d", d3line2(d.features[0][k].geometry.coordinates) )
            .attr("class", "stroke");
        }
    });

这是 GeoJson 文件 - 它应该与 GitHub 上的相同.

{
"type": "FeatureCollection", 
"properties": {"kind": "state", "state": "PR"}, 
"features": [[
    {"geometry": {"type": "MultiPolygon", "coordinates": [[[[-66.7222, 18.2198], [-66.6838, 18.2034], [-66.6729, 18.1541], [-66.6948, 18.1322], [-66.7167, 18.1322], [-66.7331, 18.1103], [-66.7715, 18.1377], [-66.7989, 18.1322], [-66.8262, 18.1705], [-66.8153, 18.2308], [-66.7824, 18.2527]]]]}, 
"type": "Feature", "properties": {"kind": "county", "name": "Adjuntas", "state": "PR"}
}

Answer 1

可能有不止一个问题(jsFiddle 会有所帮助)，但这里有一个:

d3.svg.line() 生成器需要一个点数组。你给它 [[[[-66.7222, 18.2198], [-66.6838, 18.2034].....，是点数组，但它更进一步嵌套到两层以上的数组中。我猜这是因为规范中的 coordinates 属性可以描述多个部分(比如多个岛屿组成一个单一的地理实体，或者一个“洞”，比如边界内的湖泊)。

所以在你的情况下你需要给它 d.features[0][k].geometry.coordinates[0][0]

说了这么多，但在不知道目的的情况下，请注意您绘制的是经纬度对，而不是投影的 X、Y 点。如果后者是您所期望的，那么您将需要查看 d3.geo.path()，它将允许您指定投影。