di D3 coordinate relative all'elemento genitore

Question

Vorrei ottenere le coordinate del mouse relativa al genitore o qualsiasi altro elemento del DOM diverso this ma io continuo a ricevere

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) 

Il mio codice:

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

Per quanto ho notato, posso ottenere solo le coordinate del mouse relative all'elemento che ho allegato al listener di eventi .on("mouseup", ...).

C'è un modo per ottenere quelle coordinate relative ad altri elementi nel DOM?

Answer 1

È possibile utilizzare d3.event.pageX e d3.event.pageY. Un esempio in cui uso questo:

.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 prevede un elemento DOM, non una selezione d3.

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

Naturalmente la selezione del corpo può essere ancora più facile:

d3.mouse(document.body) 

@ risposta di Tom funziona anche nel tuo caso, perché si desidera che la posizione relativa alla pagina, ma non funziona se si desidera la posizione relativa ad un altro contenitore.

Si supponga di voler posizionare un popup in cui l'utente ha fatto clic e si desidera posizionarlo rispetto all'elemento svg in modo da eseguire panoramiche con il resto del display.

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