Show Label When Mouse Over A Circle

March 31, 2024 Post a Comment

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 circle

Solution 1:

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

Assuming dataGroup is your set of circles,

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

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.

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).

Solution 2:

Try exploring the Tooltip section in Chapter 10 of Scott Murray's Interactive Data Visualization for the Web. It's a bit more complicated than using the HTML labels, but it can also offer more flexibility and functionality.

The basic idea with tooltips is that you first define their look and feel in your <style> section, using CSS standards. Next, you define a placeholder before your <script> which will set the class to 'hidden'. Then, in your <script> section, you define mouseover and mouseout functions which define (1) where the labels should show up, and (2) what they should say, and (3) toggles the class from invisible to visible.

I'm a beginner too, but I literally just did this for this map. The relevant code snippets are:

Styling your tooltip (in the <style> head; this is taken directly from the Scott Murray tutorial):

#tooltip {
            position: absolute;
            width: 230px;
            height: auto;
            padding: 10px;
            background-color: white;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            -webkit-box-shadow: 4px4px10pxrgba(0, 0, 0, 0.4);
            -moz-box-shadow: 4px4px10pxrgba(0, 0, 0, 0.4);
            box-shadow: 4px4px10pxrgba(0, 0, 0, 0.4);
            pointer-events: none;
        }

        #tooltip.hidden {
            display: none;
        }

        #tooltipp {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }

Next, setting up a tooltip placeholder (in <body>, above your <script>):

<divid="tooltip"class="hidden"style="left: 429px, top: 489.6px"><p><strong><spanid="city">Dar es Salaam</span></strong></p><pid="population">Population: 4 million</p></div>

And, finally, the mouseover function:

function mouseover(d) {

            d3.select(this).style("fill", "orange");

            var mousecoord = [0,0];
            mousecoord = d3.mouse(this);

            d3.select("#tooltip")
                .style("left", mousecoord[0] + "px")
                .style("top", mousecoord[1]-75 + "px");

            d3.select("#city")
                .text(d.city);

            d3.select("#population")
                .text(function () { return year + " population: " + comma(d["y"+year]); });

            d3.select("#tooltip").classed("hidden", false);
        };

The mouseout function is left as an exercise for the reader. :) Note that the tooltips are displayed in relation to where the mouse was when it entered the circle (this is the mousecoord stuff).

Finally, you just call the mouseover and mouseout functions when you're drawing all your circles:

                    svg.selectAll("circle")
                       .data(data)
                       .enter()
                       .append("circle")
                           (blah blah)

                       .on("mouseover", mouseover)
                       .on("mouseout", mouseout);

javascript nyumon

Show Label When Mouse Over A Circle

Solution 1:

Solution 2:

Post a Comment for "Show Label When Mouse Over A Circle"