D3와 호환되는 GeoJSON을 만드는 방법은 무엇입니까?

단순히 다음을 사용하여 .shp 파일을 geoJSON 형식으로 변환하려고합니다.

ogr2ogr -f geoJSON output.json input.shp

명령을 실행 한 후 아무 것도 잘못된 것 같습니다. 다음은 출력에서 ​​발췌 한 것입니다.

    {
    "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 ], 
...

그러나 SVG 다각형을 그리기 위해 d3 (http://d3js.org/)에서 de JSON 파일을 사용하려고하면 출력이 잘못되었습니다. QGIS에서 shp 파일이 올바르게 표시되기 때문에 내가 사용하는 방식에 문제가 있다고 생각합니다 ogr2ogr. 내가 얻는 SVG는 완전히 잘못은 아니지만 찾을 수없는 세부 사항이있는 것 같습니다. 거꾸로 뒤집혀서 분리 된 두 부분으로 왜곡 된 것 같습니다.

svg를 생성하는 데 사용한 JavaScript는 다음과 같습니다.

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

여기에 무엇이 잘못되었는지 아는 사람이 있습니까? Qgis와 myGeodata (http://converter.mygeodata.eu/vector)를 사용하여 shp 파일을 변환하려고 시도했습니다. 그러나 그들 중 누구도 원하는대로 작동하지 않습니다.

이 전체지도 제작법을 처음 접했습니다. 그래서 조언을 구해 드리겠습니다.

매우 감사합니다!

d3에서 다른 투영, 스케일 및 번역으로 놀아 내 문제를 해결했습니다. d3.geo.path ()를 사용할 때의 기본 투영은 albersUsa이므로 다른 투영을 시도해야 할 이유가있었습니다. 모양 파일을 변환 할 때 올바른 EPSG 사양을 사용하여 문제를 쉽게 해결할 수 있다고 생각하지만이 모호한 숫자는 내 지식을 초과했습니다.

결국 내가 한 일은 단순히 mercator 투영을 사용하고 translate ()를 사용하여 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에 대한 링크 가 있습니다. GADM 에서 얻은 shapefile을 단순화하기 위해 mapshaper 를 사용 했습니다 .

나는 여전히 덜 힘들고 유연한 솔루션에 관심이 있습니다. 누군가 아이디어가 있다면 미리 감사드립니다! 그러나 지금 나는 행복합니다. 독일의 16 분데스 란 더를 알아볼 수 있습니다!

shapefile 및 GeoJSON 출력에 올바른 EPSG 코드를 지정하려고 했습니까? 예 :

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

맞습니다. 독일지도의 경우 미국 데이터에 맞게 기본 투영을 변경해야합니다. 캔자스 어딘가에 있으며 960xsomething 크기의 맵입니다.

물론 올바른 매개 변수는지도 크기에 따라 다릅니다.

d3.geo.albers 투영법 ( coropleth map에 가장 적합)을 사용하려면 여기 내 매개 변수가 있습니다.

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