Как я могу отобразить координаты широты и долготы на карте с помощью 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/