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 が役立ちます) が、ここに 1 つ:

d3.svg.line()ジェネレーターは点の配列を想定しています。[[[[-66.7222, 18.2198], [-66.6838, 18.2034]....ポイントの配列であるを与えていますが、さらに 2 つのレベルの配列にネストされています。coordinatesこれは、仕様によるプロパティが複数のセグメント (単一の地理エンティティを構成する複数の島、または境界内の湖のような「穴」など) を記述できるためだと思います。

だからあなたの場合、あなたはそれを与える必要がありますd.features[0][k].geometry.coordinates[0][0]

以上のことをすべて言いましたが、目的を知らずに、投影された X、Y ポイントではなく、経度と緯度のペアをプロットしていることに注意してください。後者が期待されているものである場合は、 を調べてd3.geo.path()、射影を指定できるようにすることをお勧めします。

于 2013-02-28T01:50:05.880 に答える