将鼠标悬停在圆圈上时显示标签 [英] show label when mouse over a circle

问题描述

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

I am a beginner for JavsScript.I want to show the labels when the mouse is over and disappear when the mouse is out. Here is my code. For now, it shows all the labels of the circles.

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

推荐答案

最简单的方法是使用HTML自己的标签，这意味着您无需使用任何代码.

The easiest way to achieve this is using HTML's own labels, which means you don't need to use any code.

假设dataGroup是您的一组圈子，

Assuming dataGroup is your set of circles,

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

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

which is super straightforward. Note that you don't need .enter() if you're adding to a set of objects that have already been bound to data.

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

If you do want to use JavaScript, you will need to use .on("mouseover", function(d){ ... }) to display your text and .on("mouseout", ... ) to hide it, but for simple labels it's definitely easier to use HTML's own labels (and I think CSS's :hover style is often better than resorting to JS if you don't have to).

这篇关于将鼠标悬停在圆圈上时显示标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！