D3 Mauskoordinaten in Bezug auf übergeordnetes Element

Question

Ich möchte Eltern oder ein anderes Element im DOM andere als this Mauskoordinaten relativ bekommen, aber ich halte

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) 

Mein Code bekommen:

.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); 
}); 

Soweit ich bemerkt habe, kann ich nur Mauskoordinaten relativ zu dem Element erhalten, das ich .on("mouseup", ...) Event-Listener angehängt habe.

Gibt es eine Möglichkeit, diese Koordinaten relativ zu anderen Elementen im DOM zu erhalten?

Answer 1

Sie können d3.event.pageX und d3.event.pageY verwenden. Ein Beispiel, wo ich diese verwenden:

.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 erwartet ein DOM-Element, kein d3 Auswahl.

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

Natürlich kann der Körper die Auswahl noch einfacher:

d3.mouse(document.body) 

@ Tom Antwort auch in Ihrem Fall funktioniert, weil Sie die Position relativ zur Seite wollen, aber es, wenn Sie nicht funktioniert möchte die Position relativ zu einem anderen Container haben.

Angenommen, Sie möchten ein Popup positionieren, auf das der Benutzer geklickt hat, und Sie möchten ihn relativ zum Svg-Element positionieren, damit es mit dem Rest Ihres Bildschirms schwenkt.

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