d3.jsでブラウザのNUTSデータをレンダリング

Nomenclature of Units for Territorial Statistics (NUTS)の全国小地域データ（州/都道府県、行政区域は国よりも小さいが、都市より大きい）を使用しています。私はShapefilesとして公式のウェブサイトからそれらを取った。d3.jsでブラウザのNUTSデータをレンダリング

次に、私は、次のコマンドを使用してにGeoJSONにそれらを変換：

ogr2ogr -f GeoJSON europe_admin_sub_units.json NUTS_RG_01M_2013.shp

今、私が何をしたいのか、それがどのように見えるかの感覚を得るために、ブラウザでこれをレンダリングする簡単です。

私はこの簡単なスクリプトを試してみたが、それはうまくいきませんでした：

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

/* CSS goes here. */ 

</style> 
<body> 
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script></script> 
<script src="//d3js.org/topojson.v1.min.js"></script> 
<script> 

var width = 960, 
    height = 1160; 

var projection = d3.geo.mercator() 
    .scale(500) 
    .translate([width/2, height/2]); 

var path = d3.geo.path() 
    .projection(projection); 

var svg = d3.select("body").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

d3.json("data.json", function(error, uk) { 
    svg.append("path") 
     .attr("d", path); 
}); 

</script>

それが機能しなかった理由しかし、私は理解していません。

ブラウザのコンソールにエラーはありませんでした。私はChromeを使用しています。

Hereは、本質的に、私が使用しているデータであり、それだけでこのようになりますけれども：

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { "type": "Feature", "properties": { "NUTS_ID": "AT", "STAT_LEVL_": 0, "SHAPE_AREA": 10.0385472864, "SHAPE_LEN": 27.774664036600001 }, "geometry": { "type": "Polygon", "coordinates":

出典

2016-09-27 s.matthew.english

いくつかのこと：

まず、あなたにGeoJSONファイルは巨大です。これをブラウザでレンダリングするのは非常に遅いでしょう。結果として得られる形状を見たいだけなら問題はないかもしれませんが、それ以外の場合は単純化する必要があります。これはogr2ogr -implifyで簡単に行えます。

第2ののパスは関数なので、何かを見るには地理的な特徴と一緒に呼び出す必要があります。

https://github.com/d3/d3-3.x-api-reference/blob/master/Geo-Paths.md

d3.json("data.json", function(error, uk) { 
    svg.append("path") 
     .attr("d", path(uk)); 
});

...あなたに何かを得るが、私はそれはあなたが探しているものであるかはわからないでしょう。

また、シェイプを見たい場合は、QGIS（http://www.qgis.org/en/site/）を使用できます。これは無料で、シェイプファイルのプレビューと操作に最適です。

出典

2016-09-27 17:59:18 Joel

d3.jsでブラウザのNUTSデータをレンダリング

答えて

関連する問題