1

我正在尝试用 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"}
}
4

1 回答 1

2

可能有不止一个问题（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()，这将允许您指定投影。

于 2013-02-28T01:50:05.880 回答