D3.js 鼠标悬停显示内容 - 固定在矩形图顶部

可以使用 D3.js 的鼠标事件和 SVG text 元素来实现鼠标悬停在矩形图上时显示内容，并固定在矩形图顶部。

首先，在你的矩形元素上添加 mouseover 和 mouseout 事件。在 mouseover 事件中创建一个 SVG text 元素，并将其添加到矩形元素的顶部。在 mouseout 事件中删除 SVG text 元素。

代码示例：

// 假设你的矩形元素已经被创建并添加到 SVG 画布中
var rect = svg.append('rect')
  .attr('x', 50)
  .attr('y', 50)
  .attr('width', 100)
  .attr('height', 50);

// 创建一个文本元素，并将其添加到矩形顶部
var text = null;
rect.on('mouseover', function() {
  text = svg.append('text')
    .attr('x', 75)
    .attr('y', 40)
    .text('这是鼠标悬浮时要显示的内容')
    .style('text-anchor', 'middle');
})
// 在鼠标移开时删除文本元素
.on('mouseout', function() {
  if(text) {
    text.remove();
    text = null;
  }
});

在这个示例中，当鼠标悬浮在矩形上时，将创建一个文本元素，并将其添加到矩形的顶部。当鼠标移开时，文本元素将被删除。

你可以根据需要调整文本元素的位置、内容、样式等属性，使其符合你的需求。