D3js: cómo obtener coordenadas geográficas Lat/Log desde el clic del mouse?

Question

Usando algún código D3js y datos de topojson proyectados en un dataviz de mapa de any projection, ¿cómo puedo recuperar geocoordinates? Algo como:

var svg = d3.select("#viz").append("svg:svg") 
.attr("width", 320) 
.attr("height", 200) 
.on("mousedown", mousedown) 
.on("click", mouselocation); 

cómo sacar el geocordinates de un clic en un mapa de visualización D3js?

Enlaces a demostraciones de bienvenida.

---

Editar: una lista de demostraciones pertinentes:

• OpenLayers demo ... pero lo D3js.
• Jason Davies/rotate/ uso de projection.invert(d3.mouse(this))

Answer 1

Uso d3.mouse para obtener las coordenadas de píxeles y, a continuación, utilizar la proyección (d3.geo.azimuthal, aquí) para invertir x y y de longitud y latitud. Por ejemplo:

d3.select("svg").on("mousedown.log", function() { 
    console.log(projection.invert(d3.mouse(this))); 
}); 

Si quieres apoyar al hacer clic en el fondo de la SVG, también puede querer un rect invisible con puntero-eventos: todos. (También tenga en cuenta: las versiones anteriores de D3 usaban d3.svg.mouse en lugar de d3.mouse.)

Answer 2

Jason Davies/rotate/ uso de projection.invert(d3.mouse(this)) es agradable y puede valer la pena examinarlo.

.on("mousedown.grab", function() { var point; if (mousePoint) point = svg.insert("path", ".foreground") .datum({type: "Point", coordinates: projection.invert(d3.mouse(this))}) .attr("class", "point") .attr("d", path); // add back the point