Jak renderować współrzędne szerokości i długości geograficznej na mapie za pomocą D3?

16

Próbuję nałożyć kropki dowolnych zestawów współrzędnych długości i szerokości geograficznej na mapę Stanów Zjednoczonych.

Do tej pory znalazłem przykład kartografii D3 , ale kiedy próbuję umieścić kropki na współrzędnych pikselowych X, Y, pojawiają się one z dala od obszaru roboczego. I znaleźliśmy notatki wykładowe workshot które obejmują systemy d3 koordynować , ale nadal jestem pewny jak get lat / long koordy, aby pokazać się na mapie.

To, co do tej pory mam (właściwie tylko mapa USA)

Będziemy wdzięczni za poradę, jak to zrobić.

Jay Taylor
źródło
d3 czy svg jest poprawny?
Mapperz
Tak, d3 to svg.
Jay Taylor
1
Dobry przykład renderowania svg na mapę jest tutaj - github.com/kartograph/kartograph.py/wiki/… przy użyciu Path and Measures
Mapperz

Odpowiedzi:

16

Musisz mieć funkcję projection (), aby rzutować długość i długość swoich punktów na mapę. Domyślnie ścieżka geograficzna d3 korzysta z projekcji albersUsa, dzięki czemu można ją wyraźnie zadeklarować:

var projection = d3.geo.albersUsa();

Zobaczysz to zrobione w przykładach, które nie używają AlbersUsa, a definiując projekcję, możesz ją zmodyfikować. Po zdefiniowaniu udostępnia go jako funkcję. W ten sposób możesz umieścić swoje punkty jako okręgi SVG:

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

To powinno upuścić koło na nierównym sąsiedztwie Nowego Jorku. Następnie możesz powiązać dane, które miały atrybuty „lat” i „long”, w takim przypadku wyglądałoby to tak:

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

Funkcja projekcji przyjmuje tablicę [long, lat] i zwraca tablicę [x, y], która dobrze pasuje do transformacji, translacji () lub możesz podzielić tablicę na wartości x i y.

Poniższy przykład umieszcza bieguny, linie i punkty oraz pobiera punkty z pliku csv i rzutuje je na mapę, ale zauważ, że przekształca element g i dołącza okrąg do tego elementu (możesz także chcieć etykiety lub innych aspektów do witryny, z których wszystkie byłyby dołączone do tego rzutowanego elementu g):

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

Eliasz
źródło