Saya memiliki proyek d3 ini tempat saya membuat diagram batang. Saya memiliki beberapa bilah dan saya ingin data ditampilkan setelah saya mengarahkan kursor ke bilah tertentu. Namun, untuk beberapa alasan itu tidak menampilkan konten meskipun ada data dan css. Saya membuat elemen rects sebagai bilah dan elemen div dengan kelas tooltip yang menyertakan data. Tolong bantu.

Ini kode saya:

  chart.selectAll("rect")
    .data(json.data)
    .enter()
    .append("rect")
    .attr("x", (d) => xScale(parseDate(formatDate(d[0]))))
    .attr("y", (d) => yScale(d[1]))
    .attr("height", (d) => height - yScale(d[1]))
    .attr("width", xScale.bandwidth())
    .attr("class", "rect-col")

    .append("div")
    .attr("class", "tooltip")
    .text((d) => d[0] + d[1])
    .on("mouseenter", function (d, i) {
      //d3.select(this).style("fill", "#EE9A2F");
      d3.select(this).style("visibility", "visible");


    })
    .on("mouseleave", function (d, i) {
      //d3.select(this).style("fill", "#EECF10");
      d3.select(this).style("visibility", "visible");
    });

Css saya:

.tooltip {           
  text-align: center;           
  width: 60px;                  
  height: 28px;                 
  padding: 2px;             
  font: 12px sans-serif;        
  background: green;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;    
  color: red;
  visibility: hidden;

}

Tautan ke codepen saya codepen

1
Roger 4 Maret 2019, 13:21

1 menjawab

Jawaban Terbaik

Sederhananya: Anda tidak bisa menambahkan <div> ke dalam SVG <rect>.

Solusinya di sini adalah membuat pilihan untuk div...

const tooltip = d3.select("body")
    .append("div")
    .attr("class", "tooltip");

... dan kemudian, di dalam pendengar "mouseenter" persegi panjang:

tooltip.style("visibility", "visible")
    .text(d[0] + d[1])

Berikut adalah CodePen Anda yang telah diperbarui, Anda akan melihat tooltip di bawah bagan: https:// codepen.io/anon/pen/LaZgvp?editors=0010. Ini, mungkin, akan mengarah ke pertanyaan Anda berikutnya: "bagaimana memposisikan tooltip di atas/di sebelah persegi panjang masing-masing?" Jawaban atas pertanyaan itu, tentu saja duplikat, dapat ditemukan dengan pencarian sederhana (misalnya: https://stackoverflow.com/a/41625629/5768908 dan https://stackoverflow.com/a/40720100/5768908).

1
Gerardo Furtado 4 Maret 2019, 10:40