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/