Làm cách nào để tạo GeoJSON hoạt động với D3?

Tôi chỉ đơn giản là cố gắng chuyển đổi tệp .shp sang định dạng GeoJSON bằng cách sử dụng:

ogr2ogr -f geoJSON output.json input.shp

Sau khi thực hiện lệnh dường như không có gì sai. Đây là một đoạn trích từ 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 ], 
...

Nhưng khi tôi cố gắng sử dụng tệp de JSON trong d3 (http://d3js.org/) để vẽ đa giác SVG thì kết quả đầu ra là sai. Vì các tệp shp được hiển thị chính xác trong QGIS, tôi nghĩ rằng phải có điều gì đó không đúng với cách tôi sử dụng ogr2ogr. SVG tôi nhận được không hoàn toàn sai nhưng dường như có một chi tiết tôi không thể tìm thấy. Có vẻ như nó đã bị đảo lộn và bằng cách nào đó bị biến dạng thành hai phần tách biệt.

Đây là javaScript tôi đã sử dụng để tạo 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);

Có ai có một ý tưởng những gì đã sai ở đây? Tôi cũng đã cố gắng chuyển đổi tệp shp bằng Qgis và myGeodata (http://converter.mygeodata.eu/vector). Nhưng không ai trong số họ làm việc theo cách họ nên.

Tôi rất mới với toàn bộ công cụ bản đồ này. Vì vậy, tôi sẽ rất vui khi nhận được một số lời khuyên.

Cảm ơn rất nhiều!

OK, chơi xung quanh với các phép chiếu, thang đo và bản dịch khác nhau trong d3 đã giải quyết vấn đề của tôi. Vì phép chiếu mặc định khi sử dụng d3.geo.path () là albersUsa, nên có lý do chính đáng để thử một số phép chiếu khác. Tôi cho rằng vấn đề có thể đã được giải quyết dễ dàng hơn bằng cách sử dụng đúng thông số EPSG khi chuyển đổi tệp hình dạng nhưng những con số tối nghĩa này vượt quá kiến ​​thức của tôi.

Vì vậy, những gì tôi đã làm cuối cùng chỉ đơn giản là sử dụng phép chiếu Mercator và đưa nó vào chế độ xem svg với transl ().

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

Đây là một liên kết đến các tệp hình dạng tôi đã sử dụng và kết quả GeoJSON. Để đơn giản hóa các shapefiles mà tôi nhận được từ GADM , tôi đã sử dụng mapshaper .

Tôi vẫn sẽ quan tâm đến một giải pháp ít tốn công và linh hoạt hơn. Vì vậy, nếu bất cứ ai có một ý tưởng, cảm ơn trước! Nhưng hiện tại tôi rất vui, tôi có thể nhận ra 16 Bundesländer của Đức!

Bạn đã thử chỉ định mã EPSG chính xác cho đầu ra shapefile và GeoJSON của mình chưa? Ví dụ:

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

Bạn đã đúng, đối với bản đồ nước Đức, bạn cần thay đổi hình chiếu mặc định vì nó phù hợp với dữ liệu của Hoa Kỳ. Nó được đặt ở đâu đó ở Kansas và cho một bản đồ có kích thước 960xs Something.

Các thông số chính xác của khóa học cũng phụ thuộc vào kích thước bản đồ của bạn.

Nếu bạn muốn sử dụng phép chiếu d3.geo.albers (tốt nhất cho bản đồ coropleth ), đây là các tham số của tôi:

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