tọa độ nhấp chuột d3 liên quan đến trang không phải svg - cách dịch chúng (lỗi Chrome)

Question

Khi sự kiện đang diễn ra, d3.event.x cho vị trí của tọa độ x của nhấp chuột, nhưng liên quan đến toàn bộ Tài liệu HTML. Tôi đã thử sử dụng vị trí $ ('svg') của jQuery() để có được vị trí thực tế của svg nhưng giá trị này trả về các giá trị vô hạn.

Có cách nào dễ dàng để tìm vị trí của một svg có liên quan đến trang mà tôi đang xem không? Tôi đang sử dụng Chrome, bằng cách này, trong trường hợp vấn đề jQuery là một lỗi trình duyệt tối nghĩa.

EDIT: Tôi đã kiểm tra điều này trong firefox và $ ('svg'). Position() trả về tọa độ chính xác. ?!?

Answer 1

Thay vì sử dụng d3.event, là sự kiện gốc của trình duyệt, hãy sử dụng d3.mouse để nhận tọa độ tương ứng với một số vùng chứa. Ví dụ:

var svg = d3.select("body").append("svg") 
    .attr("width", 960) 
    .attr("height", 500); 

var rect = svg.append("rect") 
    .attr("width", "100%") 
    .attr("height", "100%") 
    .on("mousemove", mousemove); 

function mousemove(d, i) { 
    console.log(d3.mouse(this)); 
}