D3.js지도 : 회전하는 방법?

저는 d3.js로 필리핀의지도를 만들고 있는데,지도가 왼쪽에서 회전 된 것처럼 보이는 이상한 이유로 국가가 실제로 어떻게 보이지 않는지 확인합니다. projection.rotate 필드를 수정하려했지만 수정 라인이 아닌 것 같습니다.D3.js지도 : 회전하는 방법?

 var width = 1060, 
     height = 860; 

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

    d3.json("ph.json", function(error, ph) { 
     if (error) return console.error(error); 

     var subunits = topojson.feature(ph, ph.objects.ph_subunits); 

     var projection = d3.geo.albers(); 
     projection.rotate([-4 ,0]); 
     projection.scale(3000); 
     projection.center([122.427150, 12.499176]); 
     projection.parallels([10, 15]) 
     projection.translate([width/2, height/2]); 

     var path = d3.geo.path() 
      .projection(projection) 
      .pointRadius(2); 
     svg.append("path") 
     .datum(subunits) 
     .attr("d", path); 

    });

이것은 코드입니다.

도움이 될 것입니다.

감사합니다!

출처

2016-10-10 Daniele Palumbo

근본적인 변형을 모르는 경우 Albers 투영법이 약간 까다로울 수 있습니다.

이

는 ([0,0]을 기본값으로 회전 및 센터)의 평행선이 문제로, 10, 15 .parallels([10,15])로 설정된 기본 알버스 프로젝션, 100의 규모이다

이 모양은 투영의 원추형 특성 때문입니다. 남부 평행선을 선택하면 오목면이 뒤집 힙니다. 극단적 인 위도/평행선은 더 큰 굴곡을 초래합니다. 평행선 근처의 영역이 왜곡이 최소화되는 곳이므로 선택한 평행선이 관심 영역을 통과해야합니다.

우리는 (I 데모를 위해 이미지 위와 같이 평행선을 동일하게 유지됩니다) 호주에 초점을 말하고 싶었다 경우

우리는 단순히의 지리적 중심을 사용할 수 있습니다 호주 적절한 수준 .projection.scale(1000)에 투사 .projection.center([x,y]) 규모의 중심으로 :

이 유일한 변화는 호주가 더 크다면지도 구석에있을 때와 마찬가지로 여전히 왜곡되어 있습니다. 그것은 위/아래 및 왼쪽/오른쪽으로 이동 한 다음 다른 변형없이 확대되었습니다.

귀하의 질문에 비추어 볼 때, 회전은 본 자오선 근처가 아닌 영역을 표시하는 문제에 대한 해결책입니다. 우리는 경도 .projection.rotate([100,0])의 100도로 (두 번째 맵과 동일 함) 첫 번째지도를 회전하면

, 우리가 얻을 : 세계는 100 개도, 그리고 가상의 선을

를 회전하고있다 지도의 중심을 수직으로 그리면 경도 -100도 또는 서쪽 100도에서 자오선과 정렬됩니다.

우리가 관심있는 지역이 중미 인 경우 (사용했던 평행선 - 내가 계속 사용함 -이 효과적입니다) 다음 단계는지도의 중심을 투영의 중심을 따라 위아래로 이동하는 것입니다 자오선. 중앙 아메리카의 경우,이 변화는 20 도일 수 있습니다 : .projection.center([0,20]).

그래서, 필리핀 들어, 센터 [122 좌표 사용 : 적절한 규모로, 같은 결과가 모양의 1000을 가정 해 봅시다.나에게 굴복

 projection.rotate([-122.427150,0]) 
       .center([0,12.499176]) 
       .scale(1200) 
       .parallels([10,15]);

: 427150, 12.499176]과 평행 이상적인 알버스 돌기처럼 보일 수 있습니다

출처

2016-12-14 02:41:46

D3.js지도 : 회전하는 방법?

답변

관련 문제