D3-鼠标悬停矩形宽度

Question

我在这里有一个Stackblitz-https://stackblitz.com/edit/ng-graph-tooltip?file=src%2Fapp%2Fapp.component.html

将鼠标悬停在栏上时发生鼠标悬停事件

我试图获取条形图的宽度和x位置，以便定位工具提示

在条形上方时，如何获取宽度和x pos。

这是Angular中“ this”的问题吗？

d3.selectAll('.bar-opacity').on("mouseover", (d:any) => {

    const xPos = d3.select(this).attr('x');
    const rectWidth = d3.select(this).attr('width');

    console.log(xPos)

    let html = ''
      html += '<div class="">'+d.color+'</div>'
      html += '<div class="tooltip-block">'+d.day+'</div>'

    d3.select('.chart-tooltip')
      .style("left", d3.event.pageX + 5 + "px")
      .style("top", d3.event.pageY - 25 + "px")
      .html(html)

    d3.select('.chart-tooltip').style("display", null)
    })

    .on("mouseout", ()=>{
    d3.select('.chart-tooltip').style("display", "none")
      .transition()
      .duration(500)
    })