我试图在散点图上添加一个简单的工具提示,问题是它显示在图表下方,我不知道它是否适用于“ div”,但我尝试使用svg和g仍然会成功。 t显示。还有其他方法可以添加我的工具提示吗?
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)
尝试将工具提示的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)
}