D3 của tọa độ tương ứng với yếu tố phụ huynh

Question

Tôi muốn để có được tọa độ chuột tương đối so với cha mẹ hoặc bất kỳ yếu tố khác trong DOM khác hơn this nhưng tôi tiếp tục nhận được

Uncaught TypeError: Object [object Array] has no method 'getBoundingClientRect' d3.v3.min.js:1 
H d3.v3.min.js:1 
vo.mouse d3.v3.min.js:3 
(anonymous function) index.html:291 
(anonymous function) 

Mã của tôi:

.on("mouseup", function(d){ 
    var th = d3.select(this); 

    var coordinates = [0, 0]; 
    coordinates = d3.mouse(d3.select("body")); 
    console.log(coordinates[1]); 
    console.log(window); 
    //th.attr("cy", d3.mouse), 
    //d.newY = th.attr("cy"); 
    console.log(d); 
}); 

Theo như tôi đã nhận thấy, tôi chỉ có thể nhận tọa độ chuột liên quan đến phần tử mà tôi đã đính kèm .on("mouseup", ...) trình xử lý sự kiện.

Có cách nào để nhận các tọa độ đó liên quan đến các phần tử khác trong DOM không?

Answer 1

Bạn có thể sử dụng d3.event.pageX và d3.event.pageY. Một ví dụ mà tôi sử dụng điều này:

.on("mouseover", function(d){ 
     hover.transition().duration(200).style("opacity", .9); 
     hover.html(new Date(d.creationDate)+": "+d.reactionTime).style("left", d3.event.pageX+"px").style("top", (d3.event.pageY - 28)+"px"); 
    }); 

Answer 2

d3.mouse mong đợi phần tử DOM, không phải là lựa chọn d3.

d3.mouse(d3.select('body').node()) 

Tất nhiên việc lựa chọn cơ thể có thể được dễ dàng hơn:

d3.mouse(document.body) 

@ câu trả lời của Tom cũng hoạt động trong trường hợp của bạn bởi vì bạn muốn vị trí tương đối để trang, nhưng nó không hoạt động nếu bạn muốn vị trí tương đối so với một số vùng chứa khác.

Giả sử bạn muốn định vị cửa sổ bật lên nơi người dùng nhấp vào và bạn muốn định vị nó tương ứng với phần tử svg để nó hiển thị với phần còn lại của màn hình.

nodeEnter.on('click', function(d){ 
    var coordinates = d3.mouse(svg.node()); 
});