Come posso eseguire il rendering delle coordinate di latitudine-longitudine su una mappa con D3?

Sto cercando di sovrapporre punti di insiemi arbitrari di coordinate di longitudine-latitudine sulla cima di una mappa degli Stati Uniti.

Finora ho trovato l' esempio della cartografia D3 , ma quando provo a posizionare i punti sulle coordinate dei pixel X, Y appaiono fuori dalla tela. Ho trovato degli appunti delle lezioni con punti di lavoro che includono i sistemi di coordinate in d3 , ma non sono ancora sicuro di come far apparire le coordinate lat / long sulla mappa.

Questo è quello che ho finora (praticamente solo una mappa degli Stati Uniti)

I consigli su come realizzare questo lavoro sarebbero molto apprezzati!

Devi avere una funzione di proiezione () per proiettare il lat e il long dei tuoi punti sulla mappa. Per impostazione predefinita, un percorso geografico d3 utilizza la proiezione albersUsa, quindi è possibile dichiararlo esplicitamente:

var projection = d3.geo.albersUsa();

Lo vedrai fatto in esempi che non usano AlbersUsa e definendo la proiezione puoi modificarlo. La sua definizione lo rende disponibile come funzione. In questo modo puoi posizionare i tuoi punti come cerchi svg:

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

Ciò dovrebbe far cadere un cerchio nelle ruvide vicinanze di New York. È quindi possibile associare i dati con "lat" e "long" come attributi, nel qual caso sarebbe simile al seguente:

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

La funzione di proiezione prende l'array [long, lat] e restituisce un array [x, y], che si adatta perfettamente alla sintassi transform, translate (), oppure potresti dividere l'array per i valori xey.

L'esempio seguente posiziona polis, linee e punti e prende i punti da un csv e li proietta su una mappa, ma nota che trasforma l'elemento g e aggiunge un cerchio su quell'elemento (potresti anche volere un'etichetta o altri aspetti a un sito, che sarebbe tutto aggiunto a quell'elemento g proiettato):

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