Як можна зобразити координати широти-довготи на карті за допомогою D3?

Я намагаюся накласти точки довільних наборів координат довготи-широти на верхню частину карти Сполучених Штатів.

Поки що я знайшов приклад картографії D3 , але коли я намагаюся розміщувати точки на X, Y-піксельних координатах, вони з'являються далеко від полотна. Я знайшов конспекти лекцій з робочими відомостями, які включають системи координат у d3 , але я все ще не впевнений у тому, як лат / довгі координати відображатимуться на карті.

Це те, що я маю до цих пір (в основному це лише карта США)

Поради, як зробити цю роботу, будуть дуже вдячні!

Вам потрібно мати функцію проекції (), щоб проеціювати ширину та довжину точок на карту. За замовчуванням геодоріжка 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 та додає коло до цього елемента (можливо, ви також хочете мітки чи інших аспектів на сайт, який би додався до цього проектованого елемента g):

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