D3js: làm thế nào để có được Latoc/Log geocoordinates từ click chuột?

Question

Sử dụng một số mã D3js và dữ liệu topojson được chiếu trên dữ liệu bản đồ của any projection, làm cách nào tôi có thể lấy lại geocoordinates? Một cái gì đó như:

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

Làm thế nào để có được những geocordinates từ một nhấp chuột trên bản đồ trực quan D3js?

Liên kết tới bản giới thiệu chào mừng.

---

Edit: một danh sách các bản demo có liên quan:

• OpenLayers demo ... nhưng chúng tôi những gì D3js.
• Jason Davies/rotate/ sử dụng projection.invert(d3.mouse(this))

Answer 1

Sử dụng d3.mouse để có được tọa độ điểm ảnh, và sau đó sử dụng chiếu (d3.geo.azimuthal, đây) để đảo x và y kinh độ và vĩ độ. Ví dụ:

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

Nếu bạn muốn hỗ trợ nhấp vào nền của SVG, bạn cũng có thể muốn ẩn trực quan với các sự kiện con trỏ: tất cả. (Cũng lưu ý: các phiên bản cũ hơn của D3 được sử dụng d3.svg.mouse thay vì d3.mouse.)

Answer 2

Jason Davies/rotate/ sử dụng projection.invert(d3.mouse(this)) rất đẹp và có thể đáng xem.

.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