All geek questions in one place

D3js: how to get Lat / Log geocoordinates with the mouse?

Using some D3js code and predicted topographic data on a dataviz map, any projection , how can I return the geo-coordinates? Something like this:

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

How to get geo-coordinates from a click on a D3js map visualization?

Links to demos are welcome.

Edit: list of relevant demos:

+6
source share
2 answers

Use d3.mouse to get the coordinates of the pixel, and then use the projection ( d3.geo.azimuthal 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 maintain a click on an SVG background, you might also need an invisible rectangle with event pointers: that's it. (Also note: older versions of D3 used d3.svg.mouse, not d3.mouse.)

+15
source

Jason Davis / turn / use projection.invert(d3.mouse(this)) is good and may be worth it.

.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

0
source

Source: https://habr.com/ru/post/917384/

More articles:


All Articles