Javascript 反应+；d3工具提示与图例重叠

我用React+d3创建了一个堆叠和分组条形图。第一次加载时，您可以单击任何图例，它将切换图形。但是，将鼠标悬停在上方并显示图形和工具提示后，工具提示将与图例重叠，您无法单击图例进行切换。所附图像显示了其重叠方式

完整的代码演示是

---

有人能帮忙吗？

z-index

在您的情况下不起作用。但有效的方法是在

mouseout

上将高度设置为

0

，并在

mouseover

上将高度设置回

auto

.on("mouseover", function (d, i) {
  tooltip.transition().duration(50).style("opacity", 1).style("height", "auto");
})

.on("mouseout", function (d, i) {
  tooltip.transition().duration(500).style("opacity", 0).style("height", "0%");
});