javascript - D3js: how to get LatLog geocoordinates from mouse click? - Stack Overflow

admin管理员组

文章数量:1221329

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

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

• javascript
• jquery
• d3.js
• topojson

Share Improve this question Follow edited Aug 23, 2014 at 13:42 Hugolpz 18.3k2828 gold badges105105 silver badges191191 bronze badges asked Jun 4, 2012 at 16:42 khinesterkhinester 3,52099 gold badges5151 silver badges9292 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 18

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

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

本文标签： javascriptD3js how to get LatLog geocoordinates from mouse clickStack Overflow