D3.js가 GeoJSON을 잘못 그리기: 권선 순서 문제

geoJSON 데이터를 사용하여 러시아 지역을 시각화하려고 할 때 프로그래머에게 문제가 발생했습니다. 여기서 D3.js는 원하는 지도 윤곽선 대신 단일 검정색 직사각형을 그립니다. 이러한 불일치는 geoJSON 파일의 좌표 굴곡 순서 문제로 인해 발생합니다.

굴곡 순서 이해

GeoJSON 좌표는 시계 방향 또는 시계 반대 방향 순서로 정렬할 수 있습니다. , 도형의 내부 또는 외부를 나타냅니다. 대부분의 도구와 유효성 검사기는 이 순서를 무시하지만 D3.js는 지구 전체를 덮는 역 다각형 생성을 방지하기 위해 올바른 구불구불한 계산이 필요한 타원체 수학을 사용합니다.

문제 식별

SVG 경로를 검사하면 일부 경로는 정확하게 그려지고 다른 경로는 의도한 공간을 제외하고 행성 전체를 덮는 것이 분명해집니다. 이는 데이터에 시계 방향과 반시계 방향의 조합이 포함되어 있어 D3.js가 반전된 다각형을 대상 지역이 아닌 지구상의 모든 것으로 처리하기 때문입니다.

문제 해결

이 문제를 해결하려면 좌표를 다시 정렬해야 합니다. 편리한 해결책은 turf.js 라이브러리를 활용하는 것입니다:

var fixed = features.map(function(feature) {
    return turf.rewind(feature,{reverse:true});
});

이는 geoJSON 사양에 지정된 대로 올바른 감기 순서를 따르도록 각 다각형을 되감습니다. 하지만 D3.js는 반대 방향의 굴곡 순서를 사용하므로 reverse 매개변수가 true로 설정됩니다.

지도 보기 조정

굴곡 순서를 고정한 후 추가 조정 지도의 모양을 향상시키기 위해 만들 수 있습니다. 투영에 fitSize 메소드를 추가하면 지도의 크기를 조정하고 변환하여 보다 적합한 보기를 얻을 수 있습니다.