Tracer des points sur une carte avec D3

Je suis en train de tracer quelques points sur une carte à l'aide de la D3 geo basé sur les latitudes et les longitudes. Cependant, lorsque je passe ces valeurs dans ma fonction de projection, il en résulte dans les coordonnées que notre en dehors des limites de mon image SVG. Mon code est basé sur cet exemple fourni dans la documentation.

J'ai jeté le code actuel jusqu'à: http://bl.ocks.org/rpowelll/8312317

Ma source de données est un tableau simple des objets mis en forme comme

var places = [
  {
    name: "Wollongong, Australia",
    location: {
      latitude: -34.42507,
      longitude: 150.89315
    }
  },
  {
    name: "Newcastle, Australia",
    location: {
      latitude: -32.92669,
      longitude: 151.77892
    }
  }
]

Après cela, j'ai mis en place une projection plate Carrée comme suit:

var width = 960,
height = 480

var projection = d3.geo.equirectangular()
    .scale(153)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection)

À partir de là, j'ai dessiner la carte avec le code effectivement identique à celui du lié exemple. À la fin de mon script, j'utilise le code suivant pour tracer des points sur cette carte:

svg.selectAll(".pin")
    .data(places)
  .enter().append("circle", ".pin")
    .attr("r", 5)
    .attr("transform", function(d) {
      return "translate(" + projection([
        d.location.latitude,
        d.location.longitude
      ]) + ")"
    })

Toutefois, ce code dans les points qui sont à l'extérieur de l'élément SVG de limites. Est-il rien d'évident, je suis en train de faire du mal ici?

Sonne comme l'échelle/traduire de votre projection est à l'arrêt. question peut aider.
Il semble que la projection elle-même est bien, comme la carte actuelle chemin utilise la même projection et en tire sans problème.

OriginalL'auteur rpowell | 2014-01-08

  1. 15

    Vous disposez d'une simple faute de frappe dans votre code -- coordonnées doivent être transmis en tant que (longitude, latitude) de la projection, pas l'inverse. Ce code devrait fonctionner correctement:

     svg.selectAll(".pin")
  .data(places)
  .enter().append("circle", ".pin")
  .attr("r", 5)
  .attr("transform", function(d) {
    return "translate(" + projection([
      d.location.longitude,
      d.location.latitude
    ]) + ")";
  });
    Merci beaucoup! Cela semble un peu contre-intuitif.

    OriginalL'auteur Lars Kotthoff