Bagaimana cara membuat GeoJSON yang berfungsi dengan D3?

Saya hanya mencoba mengonversi file .shp ke format geoJSON menggunakan:

ogr2ogr -f geoJSON output.json input.shp

Setelah menjalankan perintah sepertinya tidak ada yang salah. Berikut kutipan dari output.json

    {
    "type": "FeatureCollection",

    "features": [
    { "type": "Feature", 
    "properties": { "ID_0": 86, "ISO": "DEU", "NAME_0": "Germany", "ID_1": 1, "NAME_1": "Baden-Württemberg", "NL_NAME_1": null, "VARNAME_1": null, "TYPE_1": "Land", "ENGTYPE_1": "State" }, 
    "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 8.708400940398242, 47.715581894910606 ], [ 8.713716147005524, 47.701734382960055 ], 
...

Tetapi ketika saya mencoba menggunakan file de JSON di d3 (http://d3js.org/) untuk menggambar poligon SVG hasilnya hanya salah. Karena file shp ditampilkan dengan benar di QGIS, saya pikir pasti ada yang salah dengan cara saya menggunakannya ogr2ogr. SVG yang saya dapatkan tidak sepenuhnya salah tetapi sepertinya ada detail yang tidak bisa saya temukan. Sepertinya telah terbalik dan entah bagaimana terdistorsi menjadi dua bagian yang terpisah.

Inilah javaScript yang saya gunakan untuk menghasilkan svg:

//dimensions
var w = 2000;
var h = 2000;

var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    var path = d3.geo.path();

    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);

Adakah yang tahu apa yang salah di sini? Saya juga mencoba mengkonversi file shp menggunakan Qgis dan myGeodata (http://converter.mygeodata.eu/vector). Tapi tak satu pun dari mereka bekerja sebagaimana mestinya.

Saya sangat baru dalam hal kartografi ini. Jadi saya akan sangat senang mendapatkan saran.

Terima kasih banyak!

OK, bermain-main dengan berbagai proyeksi, skala dan terjemahan di d3 menyelesaikan masalah saya. Karena proyeksi default ketika menggunakan d3.geo.path () adalah albersUsa ada alasan bagus untuk mencoba beberapa proyeksi lainnya. Saya kira masalahnya bisa diselesaikan dengan lebih mudah menggunakan spesifikasi EPSG yang tepat ketika mengkonversi file bentuk tetapi angka-angka tidak jelas ini melebihi pengetahuan saya.

Jadi apa yang saya lakukan pada akhirnya hanya menggunakan proyeksi mercator dan membawanya ke svg-viewport dengan translate ().

   d3.json(
    "http://localhost:8888/data/data.json",
    function (json) {

    //dimensions
    var w = 2000;
    var h = 2000;

    var svg = d3.select("#chart").append("svg")
    .attr("width", w)
    .attr("height", h);

    //create geo.path object, set the projection to merator bring it to the svg-viewport
    var path = d3.geo.path()
        .projection(d3.geo.mercator()
        .scale(20000)
        .translate([0, 3800]));

    //draw svg lines of the boundries
    svg.append("g")
        .attr("class", "black")
        .selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path);
    });

Berikut ini tautan ke file bentuk yang saya gunakan dan geoJSON yang dihasilkan. Untuk menyederhanakan shapefile, yang saya dapatkan dari GADM , saya menggunakan mapshaper .

Saya masih akan tertarik pada solusi yang kurang melelahkan dan lebih fleksibel. Jadi, jika ada yang punya Ide, terima kasih sebelumnya! Tetapi untuk saat ini saya senang saya bisa mengenali 16 Bundesländer Jerman!

Sudahkah Anda mencoba menentukan kode EPSG yang benar untuk output shapefile dan GeoJSON Anda? Misalnya:

ogr2ogr -f GeoJSON -s_srs EPSG:.... -t_srs EPSG:.... output.json input.shp

Anda benar, untuk peta Jerman Anda perlu mengubah proyeksi default yang cocok untuk data USA. Itu berpusat di suatu tempat di Kansas dan untuk peta ukuran 960x sesuatu.

Parameter yang benar tentu saja juga tergantung pada dimensi peta Anda.

Jika Anda ingin menggunakan proyeksi d3.geo.albers (terbaik untuk peta coropleth ) berikut adalah parameter saya:

var w = 415;
var h = 555;

var albers = d3.geo.albers()
    .origin([11, 51])
    .parallels([49, 53])
    .translate([230, 290])
    .scale(4000);

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