D3-将工具提示放在栏上方

Question

我这里有个突如其来的飞车-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)
            }
  });