如何解决D3.js中mouseenter显示tooltip、mouseleave无法隐藏的问题？

嘿，我看你遇到了tooltip在鼠标移开后还一直显示的问题，咱们来快速排查修复！

问题根源分析 #

你当前的mouseleave事件里用了tooltip.style("display", null)，这个写法是移除display样式，而不是主动隐藏tooltip。如果你的tooltip初始状态是显示的（或者之前的样式让它保持显示），移除display属性后它自然不会消失。另外，你的mouseenter事件里也没有明确设置tooltip的显示状态，可能只是靠默认样式显示，这就导致后续无法正确隐藏。

修复方案 #

咱们调整两个地方：

1. 初始化tooltip时设置隐藏状态：确保tooltip一开始是看不见的，比如：

// 假设你的tooltip是SVG的g元素，HTML元素类似
const tooltip = d3.select("svg")
  .append("g")
  .style("display", "none") // 默认隐藏
  // 其他初始化样式...

2. 修改mouseenter和mouseleave事件逻辑：在mouseenter时主动显示tooltip，mouseleave时明确设置隐藏：

.on("mouseenter", function(d: PieArcDatum<BandMembers>) {
  let xPosition = d3.mouse(this)[0] - 15;
  let yPosition = d3.mouse(this)[1] - 25;
  
  // 先显示tooltip，再定位
  tooltip.style("display", "block")
         .attr("transform", `translate(${xPosition}, ${yPosition})`);
  tooltip.select("text").text(d.data.Members);
})
.on("mouseleave", function(d: PieArcDatum<BandMembers>) {
  // 直接设置display为none来隐藏
  tooltip.style("display", "none");
})

额外小优化 #

你代码里的d3.select(this)没有做任何后续操作，完全可以删掉，让代码更简洁。

补充说明 #

• 如果你的tooltip是HTML元素（比如<div>），display: block和display: none完全适用；如果是SVG元素，display: inline或display: block都能让它显示，display: none隐藏。
• 如果你用的是D3 v6及以上版本，推荐用d3.pointer(event)替代d3.mouse(this)，不过你的当前写法在普通函数里是没问题的。

内容的提问来源于stack exchange，提问作者Alapan Bag