2017-09-20 10 views
1

정말 간단하게하려고합니다. 나는 GeoJSON 파일을 가지고 뉴욕의 모든 의회 선거구의 파일을 가지고 있으며, 단순히 SVG 요소에서 그것을 볼 수 있기를 원했습니다. TopoJSON으로 변환하고 this tutorial을 따르려고했습니다 (단, 새로운 업데이트 된 d3 v4 API를 사용하여 시도했습니다). 주요한 문제는지도가 렌더링되지만 매우 작다는 것입니다. 내가 그것을 확장하려고하면 나는 그지도를 완전히 잃어 버린다.왜 TopoJSON은 D3에서 그렇게 작게 렌더링됩니까? (간단한 예제)

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>NY State Districts Demo</title> 
    </head> 
    <body> 
     <h1>Hello</h1> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script> 
     <script> 
      /* JavaScript goes here */ 
      var width = 960, height = 1160; 
      var svg = d3.select("body").append("svg").attr("width", width).attr("height", height); 

      d3.json("./ny_bounds.json", function(error, ny){ 
       if(error) return console.error(error); 
       console.log(ny); 
       svg.append("path") 
        .datum(topojson.feature(ny, ny.objects.ny_bounds)) 
        .attr("d", d3.geoPath().projection(d3.geoAlbersUsa())); 
      }); 
     </script> 
    </body> 
</html> 

Here 문제의 TopoJSON에 대한 링크입니다 :

은 여기 내 HTML과 D3의 JS이다.

나는 d3과 geo/topoJSON에 대해 많은 지식을 가지고 있지 않다는 것을 인정하지만 나는이 시점에서 막혀있다. 누구든지 내가이 주제에 관해 더 많이 배울 수있는 자원이 있다면 그것은 또한 위대 할 것이다. 하지만 내가 말한 주요 문제는 맵이 너무 작아서 센터링/스케일링 할 수 없다는 것입니다.

도움을 주셔서 미리 감사드립니다.

+0

안녕하세요, 저는 시작하려는 조직과 비슷한 유형의 프로젝트에서 작업하고 있습니다. 가능할 때 우리는 서로를 도와 줄 수 있도록 stackoverflow를 연결해야합니다. – Pytth

답변

1

하와이 및 알래스카를 포함한 미국 전역의 포인트를 투영하기위한 계획으로 데이터를 투영하고 있습니다. 뉴욕은이 투영 영역의 일부일 것입니다. 지도 투영을 확대하면 투영의 중심으로 확대됩니다. d3은 특정 위치를 확대하는 것을 모릅니다. 따라서 확대하면 뉴욕이 투영 가장자리에서 떨어집니다.

AlbersUsa 투영법은 복합 투영법 (하와이 알래스카 포함)을 사용하기 때문에 사실 하나의 평면에 결합 된 여러 가지 Albers 투영법입니다. 그것의 합성 성질 때문에, 조작하기가 더 어렵습니다. 일을 간단하게하기 위해 알베르 (Albers) 투영법을 사용하는 것이 좋습니다. 또한이를 통해 뉴욕주의 투영을 조정할 수 있습니다.

Albers 투영에는 두 개의 표준 평행선이 있습니다.이 투영면은 지구 표면과 교차하는 투영 된 평면의 평행입니다 (원추형 투영). 표준 평행선은 관심 영역에 위치해야하며 하나는 하반부에, 다른 하나는 윗퍼에 위치해야합니다 (지구를 가로 지르는 평행선이므로이 평행선을 따라 왜곡이 최소화됩니다). 뉴욕 주에서는 북쪽으로 41도, 44도 같은 평행선을 사용할 수 있습니다.

또한 투영의 중앙에 위치해야합니다. 그렇게하려면 관심 분야의 지리적 중심이 필요합니다. 뉴욕의 중심은 북쪽으로 42.954도, 서쪽으로 75.527도 (-75.527도 동쪽)입니다. Albers 투영법을 중심으로하려면 x를 회전 (우리가 지구 아래로 회전 할 때 경도의 역수로)하고 y의 중심에 놓습니다.

d3.geoAlbers() 
    .center([0,42.954]) 
    .rotate([75.527,0]) 
    .parallels([41,44]) 
    .translate([width/2,height/2]) 
    .scale(k) // scale factor 

지금 당신이 그래, 당신이 당신의 너비 또는 높이가 기본 960x500 크기가 아닌 경우이 영사의 중심을 중심으로 번역 지정해야합니다 (geoPath이 프로젝션을 사용하는지 확인해야합니다 : 전부이 모양). 규모가 큰 숫자로 확대되면 2000 년 요인이 시작됩니다.