d3 지도 예제

예를 검토하여 학습을 좋아한다면 Mike Bostock은 자신의 웹 페이지에서 600개 이상의 D3.js 예제를 공유했습니다. 모든 D3.js 예제에는 버전 제어를 위한 git 리포지토리가 있으며, 포크 가능하고 복제 가능하며 주석이 있을 수 있습니다. D3에 데이터를 로드하는 방법을 이해하면 맵에 상호 작용을 추가하는 것이 실제로 매우 쉽습니다. 간단히 말해 D3를 사용하여 페이지 요소의 속성을 변경하고 마우스 오버 및 클릭과 같은 이벤트 수신기를 통합합니다. 이를 설명하기 위해 설치류 인시던트 맵을 설정하여 맵과 상호 작용할 때 주소와 같은 일부 정보를 표시할 수 있습니다. 예를 들어 인시던트 위로 마우스를 가져갈 때 데이터의 속성을 표시하도록 설정할 수 있습니다. 그리고 끝에 약간의 보너스를 들어, 여기에 D3가 할 수있는 놀라운 것들을 보여주는 내 마음에 드는 예 중 하나입니다 : d3.ascending 또는 d3.descending과 같은 지정된 비교 함수를 사용하여 현재 키에 대한 키 값을 정렬합니다. 현재 키에 대해 비교자가 지정되지 않으면 키가 반환되는 순서가 정의되지 않습니다. 예를 들어, 오름차순으로 연도를 정렬하고 내림차순으로 정렬: 다음은 JSON 호환 데이터 형식에 저장된 데이터를 기반으로 세계 지도를 그리는 D3.js 예제입니다. 사용할 맵과 지리적 투영의 크기를 정의하고(나중에 자세히 적용), SVG 요소를 정의하고, DOM에 추가하고, JSON을 사용하여 맵 데이터를 로드하기만 하면 됩니다. 지도 스타일링은 CSS를 통해 수행됩니다. 모든 매핑 라이브러리는 즉시 구형 메르카토르 투영을 지원합니다. 다른 투영을 사용하려면 한 좌표계에서 다른 좌표계로 변환할 수 있는 Proj4js 라이브러리와 같은 프로즈4js 라이브러리를 사용해야 합니다.

리플렛의 경우 Proj4리플렛 플러그인이 있습니다. 구글지도의 경우, 음, 아무것도없다. 그 후 고정 너비와 색상 값을 설정하고 이전 예제에서와 같이 높이를 설정합니다. 지금까지 예제 파일에 GeoJSON 개체를 포함했습니다. 실제로 GeoJSON은 별도의 파일에 있고 ajax 요청을 사용하여 로드됩니다. 요청 장에서 더 자세히 요청을 다루지만 이 장의 나머지 부분에서는 GeoJSON 파일을 사용하여 로드합니다. 텍스트 편집기에서 새 빈 페이지를 엽니다. 여기서는 D3 맵 코드를 작성합니다.

좀 더 간단하게 시작하고 우리의 쥐 예제를 다시 방문하고 보스턴 지역의 기본지도를 만들 수 있습니다. 이를 통해 우리는 후드 아래에서 무슨 일이 일어나고 있는지 볼 수 있으며, 몇 가지 기본 을 배우고 더 나은지도와 공간 시각화를 만들 수 있습니다. 시작하려면 다음을 만듭니다. TopoJSON은 토폴로지인을 인코딩하는 GeoJSON의 확장입니다. TopoJSON 파일의 형상은 형상을 개별적으로 표현하는 대신 호라는 공유 선 세그먼트에서 함께 스티치됩니다. 이 기술은 매트 블로흐의 MapShaper 및 호/정보 내보내기 형식인 .e00과 유사합니다. TopoJSON은 중복성을 제거하여 관련 형상을 동일한 파일에 효율적으로 저장할 수 있습니다. 예를 들어 캘리포니아와 네바다 사이의 공유 경계는 두 주에 대해 중복되는 것이 아니라 한 번만 표시됩니다.

Dark Bugsyd3 지도 예제