จะสร้าง GeoJSON ที่ทำงานกับ D3 ได้อย่างไร

ฉันแค่พยายามแปลงไฟล์. shp เป็นรูปแบบ geoJSON โดยใช้:

ogr2ogr -f geoJSON output.json input.shp

หลังจากดำเนินการคำสั่งดูเหมือนว่าไม่มีอะไรผิดปกติ นี่คือข้อความที่ตัดตอนมาจาก 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 ], 
...

แต่เมื่อฉันพยายามใช้ไฟล์ de JSON ใน d3 (http://d3js.org/) เพื่อวาดรูปหลายเหลี่ยม SVG เอาต์พุตไม่ถูกต้อง เนื่องจากไฟล์บราจะแสดงอย่างถูกต้องใน QGIS ogr2ogrผมคิดว่าจะต้องมีอะไรบางอย่างผิดปกติกับการใช้วิธีที่ฉันมี SVG ที่ฉันได้รับนั้นไม่ผิดอย่างสมบูรณ์ แต่ดูเหมือนว่าจะมีรายละเอียดที่ฉันไม่สามารถหาได้ ดูเหมือนว่ามันจะถูกพลิกคว่ำและบิดเบี้ยวออกเป็นสองส่วน

นี่คือ javaScript i ที่ใช้สร้าง 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);

ไม่มีใครมีความคิดว่าเกิดอะไรขึ้นที่นี่ ฉันยังพยายามแปลงไฟล์ shp โดยใช้ Qgis และ myGeodata (http://converter.mygeodata.eu/vector) แต่พวกเขาก็ไม่ได้ทำงานอย่างที่ควรจะเป็น

ฉันยังใหม่กับสิ่งที่เกี่ยวกับการทำแผนที่ทั้งหมด ดังนั้นฉันยินดีที่จะรับคำแนะนำ

ขอบคุณมาก ๆ!

ตกลงเล่นกับประมาณการที่แตกต่างขนาดและการแปลใน d3 แก้ปัญหาของฉัน เนื่องจากการคาดการณ์เริ่มต้นเมื่อใช้ d3.geo.path () คือ albersUsa มีเหตุผลที่ดีที่จะลองการคาดการณ์อื่น ๆ ฉันคิดว่าปัญหาสามารถแก้ไขได้ง่ายขึ้นโดยใช้ข้อมูลจำเพาะ EPSG ที่ถูกต้องเมื่อแปลงไฟล์รูปร่าง แต่ตัวเลขที่คลุมเครือเหล่านี้เกินความรู้ของฉัน

ดังนั้นสิ่งที่ฉันทำในท้ายที่สุดก็คือเพียงใช้เครื่องฉายภาพ Mercator และนำไปไว้ใน svg-viewport พร้อมแปล ()

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

นี่คือลิงค์ไปยังไฟล์รูปร่างที่ฉันใช้และ geoJSON ที่เกิดขึ้น เพื่อลดความซับซ้อน shapefiles ซึ่งผมได้จากGADMผมใช้mapshaper

ฉันจะยังคงสนใจในโซลูชันที่ใช้แรงงานน้อยลงและยืดหยุ่นกว่า ดังนั้นหากใครมีความคิดขอขอบคุณล่วงหน้า! แต่ในขณะนี้ฉันมีความสุขฉันสามารถรับรู้ 16 Bundesländerแห่งเยอรมนี!

คุณลองระบุรหัส EPSG ที่ถูกต้องสำหรับ shapefile และเอาต์พุต GeoJSON ของคุณหรือไม่ เช่น:

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

คุณถูกต้องสำหรับแผนที่ของประเทศเยอรมนีคุณจำเป็นต้องเปลี่ยนการฉายภาพเริ่มต้นตามความเหมาะสมกับข้อมูลในสหรัฐอเมริกา มันมีศูนย์กลางอยู่ที่ใดที่หนึ่งในแคนซัสและสำหรับแผนที่ขนาด 960xsomething

แน่นอนว่าพารามิเตอร์ที่ถูกต้องนั้นขึ้นอยู่กับขนาดแผนที่ของคุณด้วย

หากคุณต้องการใช้การฉาย d3.geo.albers (ดีที่สุดสำหรับแผนที่ coropleth ) นี่คือพารามิเตอร์ของฉัน:

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