D3 fare Fare ebeveyn veya <code>this</code> dışındaki DOM başka elemana göre koordinatları almak istiyorum ebeveyn elemanına

Question

göre koordinatları ama

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) 

Kodum almaya devam:

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

Fark ettiğim kadarıyla, yalnızca .on("mouseup", ...) olay dinleyicisini eklediğim öğeye göre fare koordinatlarını alabilirim.

Bu koordinatları DOM'daki diğer öğelere göre almanın bir yolu var mı?

Answer 1

d3.event.pageX ve d3.event.pageY'yi kullanabilirsiniz. Bunu kullanmak bir örnek:

.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 öğesi değil, bir d3 seçimi bekliyor. Eğer sayfaya konumunu istiyorum, çünkü Tom'un cevabı sizin durumunuzda da çalışır @

d3.mouse(document.body) 

ama eğer çalışmaz: Elbette

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

vücudu seçerek daha da kolay olabilir Başka bir konteynere göre pozisyonu istiyorum.

Kullanıcının tıklattığı ve ekranın geri kalanı ile taranmasını sağlamak için svg öğesine göre konumlandırmak istediğiniz bir pop-up konumlandırmak istediğinizi varsayalım.

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