D3가있는지도에서 위도-경도 좌표를 렌더링하려면 어떻게해야하나요?

미국지도 위에 임의의 경도 위도 좌표 세트의 점을 오버레이하려고합니다.

지금까지 D3지도 제작 예제를 찾았 지만 X, Y 픽셀 좌표에 점을 배치하려고하면 캔버스에서 떨어진 곳에 나타납니다. d3의 좌표계가 포함 된 워크 샷 강의 노트를 찾았 지만 여전히 위도 / 경도 좌표가 맵에 표시되는 방법을 확신하지 못합니다 .

이것은 내가 지금까지 가지고있는 것입니다 (미국지도 만)

이 작업을 수행하는 방법에 대한 조언은 크게 감사하겠습니다!

위도 및 경도 지점을지도에 투영하려면 projection () 함수가 필요합니다. 기본적으로 d3 지리적 경로는 albersUsa 투영을 사용하므로 명시 적으로 선언 할 수 있습니다.

var projection = d3.geo.albersUsa();

이 작업은 AlbersUsa를 사용하지 않는 예제에서 수행 된 것으로 보이며, 투영을 정의하여 수정할 수 있습니다. 정의하면 함수로 사용할 수 있습니다. 이렇게하면 포인트를 svg 서클로 배치 할 수 있습니다.

svg.append("circle").attr("r",5).attr("transform", function() {return "translate(" + projection([-75,43]) + ")";});

뉴욕의 거친 지역에 동그라미를 떨어 뜨려야합니다. 그런 다음 "lat"및 "long"이있는 데이터를 속성으로 바인딩 할 수 있습니다.이 경우 다음과 같습니다.

 svg.selectAll("circles.points")
.data(yourData)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" + projection([d.long,d.lat]) + ")";});

프로젝션 함수는 [long, lat] 배열을 가져와 [x, y] 배열을 반환합니다.이 배열은 transform, translate () 구문에 잘 맞거나 x 및 y 값으로 배열을 분할 할 수 있습니다.

아래 예는 폴리, 선 및 점을 배치하고 csv에서 점을 가져와 맵에 투영하지만 g 요소를 변환하고 해당 요소에 원을 추가합니다 (라벨 또는 다른 측면을 원할 수도 있음) 사이트에, 모든 프로젝트 요소에 추가 될 것입니다) :

https://gist.github.com/4414107 http://bl.ocks.org/d/4414107/