Pertanyaan D3.js: Posisi tooltips menggunakan posisi elemen, bukan posisi mouse?


Saya menggunakan D3 untuk menggambar grafik pencar. Saya ingin menunjukkan tooltips ketika pengguna mouse atas setiap lingkaran.

Masalah saya adalah bahwa saya bisa menambahkan tooltips, tetapi mereka diposisikan menggunakan acara mouse d3.event.pageX dan d3.event.pageY, sehingga mereka tidak diposisikan secara konsisten di atas setiap lingkaran.

Sebaliknya, ada yang sedikit di sebelah kiri lingkaran, beberapa di sebelah kanan - itu tergantung pada bagaimana mouse pengguna memasuki lingkaran.

Ini adalah kode saya:

circles
  .on("mouseover", function(d) {         
    tooltip.html(d)  
      .style("left", (d3.event.pageX) + "px")     
      .style("top", (d3.event.pageY - 28) + "px");    
  })                  
  .on("mouseout", function(d) {       
    tooltip.transition().duration(500).style("opacity", 0);   
  });

Dan JSFiddle menunjukkan masalah: http://jsfiddle.net/WLYUY/5/

Apakah ada cara saya dapat menggunakan pusat lingkaran itu sendiri sebagai posisi untuk mengarahkan tooltip, bukan posisi mouse?


35
2018-04-27 20:12


asal


Jawaban:


Dalam kasus khusus Anda, Anda dapat menggunakan d untuk memposisikan keterangan alat, yaitu

tooltip.html(d)  
  .style("left", d + "px")     
  .style("top", d + "px");

Untuk menjadikan ini lebih umum, Anda dapat memilih elemen yang sedang diarahkan dan mendapatkan koordinatnya untuk memosisikan keterangan alat, yaitu

tooltip.html(d)  
  .style("left", d3.select(this).attr("cx") + "px")     
  .style("top", d3.select(this).attr("cy") + "px");

28
2018-04-27 20:55



Menemukan sesuatu sini yang mungkin mengatasi masalah Anda bahkan jika <body> dan <svg> memiliki posisi berbeda. Ini dengan asumsi Anda punya absolute posisi yang ditetapkan untuk keterangan alat Anda.

.on("mouseover", function(d) {
    var matrix = this.getScreenCTM()
        .translate(+ this.getAttribute("cx"), + this.getAttribute("cy"));
    tooltip.html(d)
        .style("left", (window.pageXOffset + matrix.e + 15) + "px")
        .style("top", (window.pageYOffset + matrix.f - 30) + "px");
})

12
2018-06-04 15:48



Saya baru di D3 jadi ini mungkin tidak berfungsi untuk scatterplots ... tetapi tampaknya berfungsi untuk bagan Bar ... di mana v1 dan v2 adalah nilai yang diplot .. dan tampaknya mencari nilai dari data larik.

.on("mouseover", function(d) {
                  divt .transition()
                      .duration(200)
                      .style("opacity", .9);
                  divt .html(d.v1)
                      .style("left", x(d.v2)+50 + "px")
                      .style("top",y(d.v1)+ "px");})

0
2018-02-07 00:36