Home/ Questions/Q 8054417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T08:08:46+00:00

Using some D3js code and projected topojson data on a map dataviz of any

  • 0

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 :

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.)

    • 0