Wie erstelle ich ein GeoJSON, das mit D3 funktioniert?

Ich versuche einfach, eine .shp-Datei in ein geoJSON-Format zu konvertieren:

ogr2ogr -f geoJSON output.json input.shp

Nach dem Ausführen des Befehls scheint nichts mehr zu stimmen. Hier ist ein Auszug aus der 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 ], 
...

Aber wenn ich versuche, die JSON-Datei in d3 (http://d3js.org/) zu verwenden, um SVG-Polygone zu zeichnen, ist die Ausgabe einfach falsch. Da die shp-Dateien in QGIS korrekt angezeigt werden, muss meines Erachtens etwas mit der Art und Weise, wie ich sie verwende, nicht stimmen ogr2ogr. Die SVG, die ich bekomme, ist nicht ganz falsch, aber es scheint ein Detail zu geben, das ich nicht finden kann. Es scheint, als wäre es auf den Kopf gestellt und irgendwie in zwei getrennte Teile verzerrt worden.

Hier ist das JavaScript, mit dem ich das SVG generiert habe:

//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);

Hat jemand eine Idee was hier schief gelaufen ist? Ich habe auch versucht, die shp-Datei mit Qgis und myGeodata (http://converter.mygeodata.eu/vector) zu konvertieren. Aber keiner von ihnen arbeitet so, wie sie sollten.

Ich bin sehr neu in diesem ganzen Kartografie-Zeug. Daher würde ich mich sehr über einen Rat freuen.

Vielen Dank!

OK, das Herumspielen mit verschiedenen Projektionen, Maßstäben und Übersetzungen in d3 hat mein Problem gelöst. Da die Standardprojektion bei Verwendung von d3.geo.path () albersUsa ist, gab es gute Gründe, andere Projektionen zu versuchen. Ich nehme an, das Problem hätte beim Konvertieren der Formdatei mit der richtigen EPSG-Spezifikation leichter gelöst werden können, aber diese undurchsichtigen Zahlen haben mein Wissen übertroffen.

Am Ende habe ich einfach eine Mercator-Projektion verwendet und sie mit translate () in das SVG-Ansichtsfenster gebracht.

   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);
    });

Hier ist ein Link zu den verwendeten Shape-Dateien und dem daraus resultierenden GeoJSON. Um die Shape - Dateien zu vereinfachen, die ich von bekam GADM , benutzte ich mapshaper .

Ich wäre immer noch an einer weniger aufwändigen und flexibleren Lösung interessiert. Also, wenn jemand eine Idee hat, danke im Voraus! Im Moment bin ich aber froh, die 16 Bundesländer Deutschlands wiederzuerkennen!

Haben Sie versucht, den richtigen EPSG-Code für Ihre Shapefile- und GeoJSON-Ausgabe anzugeben? Z.B:

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

Sie haben Recht, für eine Deutschlandkarte müssen Sie die Standardprojektion ändern, da sie für USA-Daten passt. Es ist irgendwo in Kansas zentriert und für eine Karte der Größe 960x etwas.

Die richtigen Parameter hängen natürlich auch von Ihren Kartenabmessungen ab.

Wenn Sie die Projektion d3.geo.albers verwenden möchten (am besten für Coropleth-Karten ), sind hier meine Parameter:

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);