Question

我正在尝试使用d3.js绘制地图但我不断获得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()，这将允许您指定投影。

d3.js无法解析“MNaN，NaN”

1 个答案: