我这里有个突如其来的飞车-https://stackblitz.com/edit/ng-tootltip-wmbthm?file=src%2Fapp%2Fbar-chart.ts
我有一个D3条形图,将其悬停在条形图上会显示工具提示。
一个小屏幕显示在窗口的中央,但是在大屏幕上,它应该显示在您悬停的栏上方。
将鼠标悬停在窗口上时,我正在捕获窗口的大小和x的位置。
我正尝试用transform translate
定位它,但是工具提示没有出现在条形上方
如何使工具提示显示在我悬停的栏上方。
d3.selectAll('.bar-opacity').on("mousemove", (d)=>{
this.xPos = d3.select(d3.event.currentTarget).attr('x');
d3.select('.chart-tooltip').style("display", null)
let html = ''
html += '<div class="">'+d.color+'</div>'
html += '<div class="tooltip-block">'+d.day+'</div>'
let tooltip = d3.select('.chart-tooltip');
if (window.innerWidth < 500) {
const toolTipWidth = tooltip.node().getBoundingClientRect().width;
const halfToolTipWidth = 40;
tooltip
.style("position", "absolute")
.style("left", "calc(50% - " + halfToolTipWidth +"px)")
.style("top", 0 + "px")
.html(html)
}else{
tooltip
.attr("transform", "translate(" + this.xPos + "," + this.margin.top + ")")
.style("top", 0 + "px")
.html(html)
}
});