d3 鼠标悬浮出现内容内容固定在矩形图顶部

可以使用d3的鼠标事件和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;
  }
});

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

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