D3.js-지역

지리 공간 좌표는 종종 날씨 또는 인구 데이터에 사용됩니다. D3.js는 지리 데이터를위한 세 가지 도구를 제공합니다.

Paths -최종 픽셀을 생성합니다.
Projections − 구 좌표를 데카르트 좌표로 바꾸고
Streams − 속도가 빨라집니다.

D3.js의 지리적 위치를 배우기 전에 다음 두 용어를 이해해야합니다.

D3 지리적 경로 및
Projections

이 두 용어에 대해 자세히 논의하겠습니다.

D3 지리적 경로

지리적 경로 생성기입니다. GeoJSON은 SVG 경로 데이터 문자열을 생성하거나 캔버스에 대한 경로를 렌더링합니다. 캔버스는 성능 향상을 위해 동적 또는 대화 형 프로젝션에 권장됩니다. D3 Geo Path Data Generator를 생성하려면 다음 함수를 호출 할 수 있습니다.

d3.geo.path()

여기, d3.geo.path() 경로 생성기 기능을 사용하면 지리 좌표에서 데카르트 좌표로의 변환에 사용할 맵 투영을 선택할 수 있습니다.

예를 들어, 인도의지도 세부 정보를 표시하려면 아래와 같이 경로를 정의 할 수 있습니다.

var path = d3.geo.path()
svg.append("path")
   .attr("d", path(states))

투영

투영은 구형 다각형 기하학을 평면 다각형 기하학으로 변환합니다. D3는 다음과 같은 프로젝션 구현을 제공합니다.

Azimuthal − 방위각 투영은 구를 평면에 직접 투영합니다.
Composite − 컴포지트는 단일 디스플레이로 구성된 여러 프로젝션으로 구성됩니다.
Conic − 구를 원뿔에 투영 한 다음 원뿔을 평면 위로 펼칩니다.
Cylindrical − 원통형 투영은 구를 포함하는 원통에 투사 한 다음 원통을 평면 위로 펼칩니다.

새 투영을 만들려면 다음 기능을 사용할 수 있습니다.

d3.geoProjection(project)

지정된 원시 투영 프로젝트에서 새 투영을 구성합니다. 프로젝트 함수는 라디안 단위로 지정된 지점의 경도와 위도를 사용합니다. 코드에 다음 프로젝션을 적용 할 수 있습니다.

var width = 400
var height = 400
var projection = d3.geo.orthographic() 
var projections = d3.geo.equirectangular()
var project = d3.geo.gnomonic()
var p = d3.geo.mercator()
var pro = d3.geo.transverseMercator()
   .scale(100)
   .rotate([100,0,0])
   .translate([width/2, height/2])
   .clipAngle(45);

여기에서 위의 투영 중 하나를 적용 할 수 있습니다. 이러한 각 예측에 대해 간략하게 논의하겠습니다.

d3.geo.orthographic()− 직교 투영은 단일 반구를 표시하는 데 적합한 방위각 투영입니다. 관점은 무한대입니다.
d3.geo.gnomonic() − gnomonic 투영은 큰 원을 직선으로 투영하는 방위각 투영입니다.
d3.geo.equirectangular()− 등장 방형은 가능한 가장 단순한 지리적 투영법입니다. 정체성 기능. 동일 면적도 등각도 아니지만 때때로 래스터 데이터에 사용됩니다.
d3.geo.mercator() − Spherical Mercator 투영은 일반적으로 타일 매핑 라이브러리에서 사용됩니다.
d3.geo.transverseMercator() − Transverse Mercator 투영법.

작업 예

이 예에서 인도지도를 만들어 보겠습니다. 이렇게하려면 다음 단계를 따라야합니다.

Step 1 − Apply styles − 아래 코드를 사용하여지도에 스타일을 추가해 보겠습니다.

<style>
   path {
      stroke: white;
      stroke-width: 0.5px;
      fill: grey;
   }
   
   .stateTN { fill: red; }
   .stateAP { fill: blue; }
   .stateMP{ fill: green; }
</style>

여기에서는 상태 TN, AP 및 MP에 대해 특정 색상을 적용했습니다.

Step 2 − Include topojson script − TopoJSON은 아래 정의 된 토폴로지를 인코딩하는 GeoJSON의 확장입니다.

<script src = "http://d3js.org/topojson.v0.min.js"></script>

이 스크립트를 코딩에 포함 할 수 있습니다.

Step 3 − Define variables − 아래 코드를 사용하여 스크립트에 변수를 추가합니다.

var width = 600;
var height = 400;
var projection = d3.geo.mercator()
   .center([78, 22])
   .scale(680)
   .translate([width / 2, height / 2]);

여기서 SVG 너비는 600이고 높이는 400입니다. 화면은 2 차원 공간이고 우리는 3 차원 객체를 제시하려고합니다. 따라서 우리는 다음을 사용하여 땅의 크기 / 모양을 심하게 왜곡 할 수 있습니다.d3.geo.mercator() 함수.

중심이 지정됩니다 [78, 22]. 이것은 투영의 중심을 지정된 위치에 경도와 위도의 두 요소 배열 (도 단위)로 설정하고 투영을 반환합니다.

여기서지도는 서쪽 78도, 북쪽 22 도의 중앙에 위치했습니다.

스케일은 680으로 지정되며, 이것은 투영의 스케일 팩터를 지정된 값으로 설정합니다. 축척이 지정되지 않은 경우 현재 축척 비율을 반환하며 기본값은 150입니다. 축척 비율은 투영간에 일관성이 없다는 점에 유의해야합니다.

Step 4 − Append SVG − 이제 SVG 속성을 추가합니다.

var svg = d3.select("body").append("svg")
   .attr("width", width)
   .attr("height", height);

Step 5 − Create path − 다음 코드 부분은 새로운 지리적 경로 생성기를 생성합니다.

var path = d3.geo.path()
   .projection(projection);

여기서 경로 생성기 (d3.geo.path ())는 이전에 변수 투영을 사용하여 메르카토르 투영으로 정의한 투영 유형 (.projection)을 지정하는 데 사용됩니다.

Step 6 − Generate data − indiatopo.json –이 파일에는 다음 첨부 파일에서 쉽게 다운로드 할 수있는 레코드가 너무 많습니다.

다운로드 indiatopo.json file

파일을 다운로드 한 후 D3 위치에 추가 할 수 있습니다. 샘플 형식은 다음과 같습니다.

{"type":"Topology","transform":{"scale":[0.002923182318231823,0.0027427542754275428],
"translate":[68.1862,8.0765]},"objects":
{"states":{"type":"GeometryCollection",
"geometries":[{"type":"MultiPolygon","id":"AP","arcs":
[[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,
25,26,27,28,29,30,31,32,33,34]],[[35,36,37,38,39,40,41]],[[42]],
[[43,44,45]],[[46]],[[47]],[[48]],[[49]],[[50]],[[51]],[[52,53]],
[[54]],[[55]],[[56]],[[57,58]],[[59]],[[60]],[[61,62,63]],[[64]],
[[65]],[[66]],[[67]],[[68]],[[69]],[[-41,70]],
[[71]],[[72]],[[73]],[[74]],[[75]]],
"properties":{"name":"Andhra Pradesh"}},{"type":"MultiPolygon",
"id":"AR","arcs":[[[76,77,78,79,80,81,82]]],
"properties":{"name":"Arunachal Pradesh"}},{"type":"MultiPolygon",
"id":"AS","arcs":[[[83,84,85,86,87,88,89,90,
91,92,93,94,95,96,97,98,99,100,101,102,103]],
[[104,105,106,107]],[[108,109]]], ......

........................................

Step 7 − Draw map − 이제 indiatopo.json 파일을 만들고지도를 그립니다.

d3.json("indiatopo.json", function(error, topology) {
   g.selectAll("path")
   .data(topojson.object(topology, topology.objects.states)
   .geometries)
   .enter()
   .append("path")
   .attr("class", function(d) { return "state" + d.id; })
   .attr("d", path)
});

여기에서는 인도지도 (indiatopo.json)의 좌표와 함께 TopoJSON 파일을로드합니다. 그런 다음 그래픽의 모든 경로 요소에 대해 작업 할 것임을 선언합니다. g.selectAll ( "path")로 정의됩니다. 그런 다음 TopoJSON 파일에서 국가를 정의하는 데이터를 가져옵니다.

.data(topojson.object(topology, topology.objects.states)
   .geometries)

마지막으로 표시 할 데이터에 추가 할 것입니다. .enter() 메소드를 사용하여 해당 데이터를 경로 요소로 추가합니다. .append(“path”) 방법.