我在 d3 中的工具提示不会出现在正确的位置

Question

我试图在我的散点图中添加一个简单的工具提示，问题是它显示在图表下方，我不知道它是否用于“div”，但我已经尝试使用 svg 和 g 并且仍然不会显示. 有没有其他方法可以添加我的工具提示？

const tooltip = d3.select("#CraftBeer")
                  .append("div")
                  .style("opacity", 0)
                  .attr("class", "tooltip")
                  .style("background-color", "white")
                  .style("border", "solid")
                  .style("border-width", "1px")
                  .style("border-radius", "5px")
                  .style("padding", "10px")


              const mouseover = function(d) {
                tooltip
                  .style("opacity", 1)
              }

              const mousemove = function(d) {
                tooltip
                  .html(d.beer + "<br/>" + "ABV:" + d.abv + "%" + "<br/>" + "IBU:" + d.ibu +"<br/>" + "SRM:" + d.srm)
                  .style("left", (d3.event.pageX+10)+"px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
                  .style("top", (d3.event.pageY-10)+"px")
              }


              const mouseleave = function(d) {
                tooltip
                  .transition()
                  .duration(300)
                  .style("opacity", 0)
              }



    plot = g.selectAll("bottle")
                .data(data)
                .enter()
                .append("g")
                    .attr("transform", d => `translate(${xScale(d.abv)},${yScale(d.ibu)})`)
                    .style("fill", d => colors(d.srm))
                    .style("stroke", d => colors(d.srm))
                    .style("stroke-width", "13px")


    plot.append("g")
            .attr("transform", `scale(0.150) translate(-256,-256)`) 
            .selectAll()
            .data(bottlePath)
            .enter()
            .append("path")
            .attr("d", d => d)

    plot.on("mouseover", mouseover)
        .on("mousemove", mousemove)
        .on("mouseleave", mouseleave)

Answer 1

尝试将工具提示的style放在html之前，例如

              const mousemove = function(d) {
                tooltip
                  .style("left", (d3.event.pageX+10)+"px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
                  .style("top", (d3.event.pageY-10)+"px")
                  .html(d.beer + "<br/>" + "ABV:" + d.abv + "%" + "<br/>" + "IBU:" + d.ibu +"<br/>" + "SRM:" + d.srm)

              }