D3 в координаты относительно родительского элемента

Question

Я хотел бы получить координаты мыши относительно родителя или любого другого элемента в DOM, кроме this, но я получаю

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) 

Мой код:

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

Насколько я заметил, я могу получить только координаты мыши относительно элемента, который я подключил .on("mouseup", ...) прослушиватель событий.

Есть ли способ получить эти координаты относительно другого элемента в DOM?

Answer 1

Вы можете использовать d3.event.pageX и d3.event.pageY. Пример, в котором я использую это:

.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 ожидает элемент DOM, а не выбора d3.

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

Конечно выбор тела может быть еще проще:

d3.mouse(document.body) 

@ ответ Тома работает также в вашем случае, потому что вы хотите, чтобы положение относительно страницы, но это не работает, если вам хотите положение относительно другого контейнера.

Скажите, что вы хотите разместить всплывающее окно, где пользователь щелкнул, и вы хотите поместить его относительно элемента svg, чтобы он располагался вместе с остальной частью вашего дисплея.

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