D3js: jak uzyskać współrzędne geograficzne Lat/Log od kliknięcia myszką?

Question

Korzystanie z niektórych kodów D3js i rzutowanych danych topojsona na mapie dataviz z any projection, w jaki sposób mogę odzyskać współrzędne geograficzne? Coś takiego:

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

Jak uzyskać geocordinates od kliknięcia na D3js wizualizacji mapy?

Linki do demonstracji mile widziane.

---

Edit: wykaz odpowiednich dema:

• OpenLayers demo ... ale co D3js.
• Jason Davies/rotate/ zastosowanie projection.invert(d3.mouse(this))

Answer 1

użytkowania d3.mouse uzyskać współrzędnych pikseli, a następnie za pomocą występu (d3.geo.azimuthal tutaj) do odwracania x i Y do długości i szerokości geograficznej. Na przykład:

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

Jeśli chcesz wesprzeć klikając na tle SVG, może również chcieć niewidzialną rect ze wskaźnikiem-wydarzeń: wszystkie. (Zwróć też uwagę: starsze wersje D3 używają raczej d3.svg.mouse niż d3.mouse).

Answer 2

Jason Davies/rotate/ użycie projection.invert(d3.mouse(this)) jest ładne i może warte obejrzenia.

.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