스케일링 d3.js 투영

d3을 사용하여 NYC의지도를 그리려고합니다. http://www.nyc.gov/html/dcp/html/bytes/dwndistricts.shtml에서 여러 개의 shapefile을 다운로드했습니다. 저는 http://converter.mygeodata.eu/을 사용하여 geoJSON으로 변환하여 WGS 84 (일명, 위도와 경도라고 생각합니다)에 있도록했습니다.스케일링 d3.js 투영

geoJSON이 유효하다는 것이 확실합니다. matplotlib을 사용하여 플롯 할 수 있으며 NYC처럼 보이며 숫자가 유효한 범위에있는 것 같습니다. 내 자바 스크립트는 다음과 같습니다.

var path = d3.geo.path() 
d3.select("body") 
    .append("svg") 
    .attr("height", 1000) 
    .attr("width", 1000) 
    .append("g") 
    .selectAll("path") 
    .data(data.features) 
    .enter() 
    .append("path") 
    .attr("d", path) 
    .style("stroke","black") 
    .style("stroke-width","1px")

이 광고는 광고 된 바와 같이 NYC의 Albers 프로젝션을 그립니다. 문제는 내 생각에, 미국이 멋진 웹 페이지에 맞도록 스크린의 오른쪽에서 NYC의 경로를 조금 비틀어 서 투영의 크기를 선택하는 것이 문제입니다.

내 올바른/위도 범위를 내 SVG의 너비와 높이에 맞게 확장하려면 '올바른'방법이 무엇인지 (즉, 가장 먼저 d3onic이라고 말하려합니다.) geo.path() 크기를 조정 하시겠습니까?

(작은 면책 조항 : 나는 분명 뭔가를 놓친 한 경우, 이것은 내가 하루의 극단에 완료하기 위해 노력하고있어 프로젝트입니다 사과)

출처

2012-03-09 Mike Dewar

먼저, 투사를 만들 수 있습니다 , d3.geo.path에 할당하면 프로젝션 설정을 사용자 정의 할 수 있습니다.

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

기본 투영

실제로 48 미국, 알래스카, 하와이 푸에르토 리코를 도시 설계 (네 개의 다른 불연속 영역)와 복합체이다 d3.geo.albersUsa 투영된다. 아, 민족 중심주의. ;)

git 저장소에서 albers example을 사용하여 올바른 투영 설정을 대화식으로 결정합니다. 사용자가 설정해야하는 설정은 다음과 같습니다

기원은 뉴욕의 위도와 경도해야한다 (아마도 73.98 °, 40.71 °) 당신이 있다면
1, 그래서 당신의 표시 영역 (의 중심이어야한다 번역 무언가를 그리는 960 × 500, 당신은 기본 480,250을 사용할 수 있습니다, 이것은 원점의 픽셀 위치입니다)
스케일은 확대 할 정도를 지정하는 숫자입니다. 도시 규모지도를 그리기 때문에 10000

마지막으로 일부 평행 물을 선택해야합니다. d3.geo.albers()가 제공하는 기본값을 사용할 수 있지만 NYC에 적합한 기본값이 더있을 수 있습니다. 아마도 다른지도 영역에 대한 표준 평행선을 게시하기 때문에 USGS에 확인하십시오.

출처

2012-03-09 05:54:35 mbostock

감사합니다. mike! 이제는 랩톱을 깨지 않고 SVG로 렌더링 할 수있는 NYC 모양 파일을 찾아야합니다. –

그리고 다시 한번 *이 링크를 보시오. * 낙담합니다. 그건 404가 될거야.이게 그거야? https://gist.github.com/minikomi/4552802 – user13500

스케일링 d3.js 투영

답변

관련 문제