D3js: how to get Lat/Log geocoordinates from mouse click?

Question

Using some D3js code and projected topojson data on a map dataviz of any projection, how can I get back geocoordinates ? Something such:

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

How to get the geocordinates from a click on a D3js map visualisation ?

Links to demos welcome.

---

Edit: a list of relevant demos :

• OpenLayers demo... but we what D3js.
• Jason Davies/rotate/ use of projection.invert(d3.mouse(this))

Answer 1

Use d3.mouse to get the pixel coordinates, and then use the projection (d3.geo.azimuthal, here) to invert x and y to longitude and latitude. For example:

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

If you want to support clicking on the background of the SVG, you may also want an invisible rect with pointer-events: all. (Also note: older versions of D3 used d3.svg.mouse rather than d3.mouse.)

Answer 2

Jason Davies/rotate/ use of projection.invert(d3.mouse(this)) is nice and may worth a look.

.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