D3js : 마우스 클릭으로 위도/경위 좌표를 얻는 방법?

Question

any projection의지도 데이터viz에 일부 D3js 코드와 투영 된 topojson 데이터를 사용하여 어떻게 geocoordinates를 다시 얻을 수 있습니까? 같은 뭔가 :

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

가 어떻게 D3js 맵 시각화에 클릭에서 geocordinates를 얻을?

데모 오신 것을 환영합니다.

---

편집 : 관련 데모의 목록 :

• OpenLayers demo ...하지만 우리는 무엇을 D3js. projection.invert(d3.mouse(this))

Answer 1

사용 d3.mouse의

Jason Davies/rotate/ 사용하는 위도 및 경도에 X 및 Y을 반전 (여기서, d3.geo.azimuthal) 투사를 사용해서 픽셀 좌표를 얻을하고있다. 예를 들어 모든 :

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

당신이 SVG의 배경에 클릭 지원하려면

은 또한 포인터 이벤트에 보이지 않는 RECT을 할 수 있습니다. (또한 참고 : D3의 이전 버전 d3.svg.mouse보다는 d3.mouse을 사용했다.)

Answer 2

Jason Davies/rotate/projection.invert(d3.mouse(this))의 사용은 좋은이며 보일 수 있습니다 가치.

.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