Comment puis-je afficher les coordonnées latitude-longitude sur une carte avec D3?

J'essaie de superposer des points d'ensembles arbitraires de coordonnées longitude-latitude au-dessus d'une carte des États-Unis.

Jusqu'à présent, j'ai trouvé l' exemple de la cartographie D3 , mais lorsque j'essaie de placer des points sur les coordonnées en pixels X, Y, ils apparaissent bien en dehors de la toile. J'ai trouvé des notes de cours pratiques qui incluent des systèmes de coordonnées en d3 , mais je ne sais toujours pas comment faire apparaître les coordonnées lat / longues sur la carte.

C'est ce que j'ai jusqu'à présent (à peu près seulement une carte des États-Unis)

Des conseils sur la façon de faire ce travail seraient grandement appréciés!

Vous devez avoir une fonction projection () pour projeter le lat et le long de vos points sur la carte. Par défaut, un chemin géographique d3 utilise la projection albersUsa, vous pouvez donc le déclarer explicitement:

var projection = d3.geo.albersUsa();

Vous le verrez dans des exemples qui n'utilisent pas AlbersUsa, et en définissant la projection, vous pouvez la modifier. Le faire définir le rend disponible en tant que fonction. De cette façon, vous pouvez placer vos points sous forme de cercles svg:

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

Cela devrait faire un cercle dans les environs approximatifs de New York. Vous pouvez alors lier des données qui ont les attributs "lat" et "long", auquel cas cela ressemblerait à ceci:

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

La fonction de projection prend un tableau [long, lat] et renvoie un tableau [x, y], qui s'intègre parfaitement dans la syntaxe de transformation, translate (), ou vous pouvez diviser le tableau pour les valeurs x et y.

L'exemple ci-dessous place des polys, des lignes et des points, et prend les points d'un csv et les projette sur une carte, mais notez qu'il transforme l'élément g et ajoute un cercle à cet élément (vous pouvez également vouloir une étiquette ou d'autres aspects à un site, qui seraient tous ajoutés à l'élément g projeté):

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