D3js: Wie man Lat/Log Geocoordinaten von Mausklick erhält?

Question

Mit einigen D3js Code und projizierten topojson Daten auf einer Karte Datenviz von any projection, wie kann ich geokoordiniert zurück? Etwas so:

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

Wie das geocordinates von einem Klick auf einer D3js Karte Visualisierung bekommen?

Links zu Demos willkommen.

---

Edit: eine Liste relevanter Demos:

• OpenLayers demo ... aber wir was D3js.
• Jason Davies/rotate/ Verwendung projection.invert(d3.mouse(this))

Answer 1

d3.mouse Verwenden der Pixelkoordinaten zu erhalten, und dann die Projektion verwenden (d3.geo.azimuthal, hier) x und y zur Länge und Breite zu invertieren. Zum Beispiel:

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

Wenn Sie möchten, auf dem Hintergrund des SVG zu unterstützen, klicken, können Sie auch eine unsichtbare rect mit Zeiger-Ereignissen: alle. (Beachten Sie auch: ältere Versionen von D3 verwendeten d3.svg.mouse statt d3.mouse.)

Answer 2

Jason Davies/rotate/ Verwendung von projection.invert(d3.mouse(this)) ist nett und kann einen Blick wert sein.

.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