Wie kann ich mit D3 Breitengrad-Längengrad-Koordinaten auf einer Karte rendern?

16

Ich versuche, Punkte aus beliebigen Längen- und Breitengradkoordinaten auf einer Karte der Vereinigten Staaten zu überlagern.

Bisher habe ich das Beispiel für die D3-Kartografie gefunden , aber wenn ich versuche, Punkte auf X-, Y-Pixelkoordinaten zu platzieren, erscheinen sie weit weg von der Leinwand. Ich habe WorkShot-Vorlesungsnotizen gefunden, die Koordinatensysteme in d3 enthalten , bin mir aber immer noch nicht sicher, wie Lat / Long- Koordinaten auf der Karte angezeigt werden sollen.

Das habe ich bisher (so ziemlich nur eine Karte der USA)

Ratschläge, wie man diese Arbeit macht, wären sehr dankbar!

cartography latitude-longitude maps d3 Jay Taylor
quelle
d3 ist svg richtig?
Mapperz
Ja, d3 ist svg.
Jay Taylor
1
Ein gutes Beispiel für das Rendern von svg in eine Karte finden Sie hier - github.com/kartograph/kartograph.py/wiki/… mit Path and Measures
Mapperz

Antworten:

15

Sie benötigen eine projection () -Funktion, um den Lat und den Long Ihrer Punkte auf die Karte zu projizieren. Standardmäßig verwendet ein d3-Geo-Pfad die albersUsa-Projektion, sodass Sie diese explizit deklarieren können:

var projection = d3.geo.albersUsa();

Sie werden dies in Beispielen sehen, die AlbersUsa nicht verwenden, und indem Sie die Projektion definieren, können Sie sie ändern. Wenn es definiert ist, wird es als Funktion verfügbar. Auf diese Weise können Sie Ihre Punkte als Svg-Kreise platzieren:

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

Das sollte in der rauen Umgebung von New York einen Kreis schlagen. Sie könnten dann Daten mit den Attributen "lat" und "long" binden. In diesem Fall würde dies folgendermaßen aussehen:

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

Die Projektionsfunktion benötigt ein [long, lat] -Array und gibt ein [x, y] -Array zurück, das gut in die Syntax von transform, translate () passt, oder Sie können das Array für x- und y-Werte aufteilen.

Im folgenden Beispiel werden Polys, Linien und Punkte platziert und die Punkte aus einer CSV-Datei entnommen und auf eine Karte projiziert. Beachten Sie jedoch, dass das g-Element transformiert und ein Kreis an dieses Element angehängt wird (möglicherweise möchten Sie auch eine Beschriftung oder andere Aspekte an eine Site, die alle an das projizierte g-Element angehängt wird):

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

Elijah
quelle