D3.js GeoJSON 렌더링에서 검은색 직사각형 오류를 해결하는 방법은 무엇입니까?

D3.js에서 잘못된 GeoJSON 렌더링을 수정하는 방법

D3.js에서 geoJSON 데이터를 시각화하려고 할 때 다음과 같은 문제가 자주 발생합니다. 예상 렌더링과 실제 렌더링 사이의 불일치. 출력에 의도한 지리적 특징 대신 커다란 검은색 직사각형이 표시되면 특별한 문제가 발생합니다.

문제 분석

질문에 제공된 코드를 검사하면 다음과 같습니다. 좌표의 굴곡 순서에 오류가 있음이 분명합니다. D3.js는 좌표에 대한 특정 굴곡 순서가 필요한 타원체 수학을 활용합니다. 안타깝게도 geoJSON 파일에는 "시계 방향" 및 "시계 반대 방향" 구불구불한 순서가 혼합되어 있어 잘못된 렌더링이 발생합니다.

해결책

이를 수정하려면 문제가 발생하면 geoJSON 파일의 모든 좌표가 올바른 굴곡 순서를 가지고 있는지 확인해야 합니다. 이는 좌표 순서를 다시 지정하거나 기능 되감기를 위한 편리한 방법을 제공하는 turf.js와 같은 라이브러리를 사용하여 수동으로 수행할 수 있습니다.

코드 예

굴곡 순서를 수정하는 turf.rewind() 메서드:

<code class="javascript">var fixed = features.map(function(feature) {
  return turf.rewind(feature,{reverse:true});
});</code>

추가 고려 사항

굴곡 순서를 수정하면 검은색 직사각형 문제가 해결되지만 다른 점에 주목할 가치가 있습니다. D3.js의 특이한 점. geoJSON 사양과 달리 D3.js는 반대 방향의 감기 순서(시계 반대 방향, 시계 반대 방향)를 사용합니다. 따라서 적절한 렌더링을 보장하기 위해 되감기 전에 감기 순서를 반대로 해야 할 수도 있습니다.

향상된 시각화

감기 순서를 수정하는 것 외에도 투영 설정은 지정된 공간 내에 기능을 맞춰 시각화를 향상시킬 수 있습니다. 이는 fitSize 메서드를 사용하여 기능을 확장하고 변환할 수 있습니다.

<code class="javascript">// Fit the features to the screen
var projection = d3.geoMercator().fitSize([width, height], features);</code>

이 단계를 수행하면 D3.js에서 geoJSON 데이터의 잘못된 렌더링을 수정하고 원하는 데이터의 정확한 시각화를 얻을 수 있습니다. 지리적 특징.

위 내용은 D3.js GeoJSON 렌더링에서 검은색 직사각형 오류를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!