javascript - 当鼠标悬停在圆圈上时显示标签

Question

我是 JavsScript 的初学者。我想在鼠标悬停时显示标签，并在鼠标移开时消失。这是我的代码。目前，它显示了圆圈的所有标签。

 dataGroup.enter().append("text")
        .attr('transform', function (d) {
              return "translate(" + x(d.poverty_rate) + "," + y(d.life_expectancy) + ")"; })
        .text(function(d) {return d["state"]});

Answer 1

实现此目的的最简单方法是使用 HTML 自己的标签，这意味着您不需要使用任何代码。

假设 dataGroup 是您的一组圈子，

 dataGroup.append("title")
    .text(function(d) {return d["state"]});

这非常简单。请注意，如果您要添加到一组已绑定(bind)到数据的对象，则不需要 .enter()。

如果您确实想使用 JavaScript，则需要使用 .on("mouseover", function(d){ ... }) 来显示文本，并使用 .on("mouseout", ... ) 来显示文本隐藏它，但对于简单的标签，使用 HTML 自己的标签肯定更容易(而且我认为 CSS 的 :hover 样式通常比诉诸 JS 更好，如果不需要的话)。