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

Я хотел бы получить координаты мыши относительно родительского или любого другого элемента в 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?

Ответ 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");
    });

Ответ 2

d3.mouse ожидает элемент DOM, а не выбор d3.

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

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

d3.mouse(document.body)

Ответ на

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

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

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