在d3折线图中，如何在文本后面创建与鼠标悬停内容大小相同的边界框？

// 鼠标悬停事件处理函数
function handleMouseOver(event) {
  // 获取鼠标悬停的文本内容
  const textContent = event.target.textContent;

  // 选择对应的文本元素
  const textElement = d3.select(event.target);

  // 计算文本的边界框大小
  const bbox = textElement.node().getBBox();

  // 创建矩形元素表示边界框
  const rectElement = textElement
    .append('rect')
    .attr('x', bbox.x)
    .attr('y', bbox.y)
    .attr('width', bbox.width)
    .attr('height', bbox.height);

  // 设置矩形元素的样式属性
  rectElement
    .style('fill', 'yellow')
    .style('stroke', 'black')
    .style('stroke-width', '1px');
}

// 绑定鼠标悬停事件处理函数
d3.selectAll('text')
  .on('mouseover', handleMouseOver);