将鼠标悬停在圆上时显示标签

show label when mouse over a circle

本文关键字：显示 标签 鼠标 悬停      更新时间：2023-09-26

我是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"]});
实现这一点的最简单方法是使用HTML自己的标签，这意味着您不需要使用任何代码。

假设数据组是你的一组圆圈，

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

这是非常直接的。请注意，如果要添加到一组已经绑定到数据的对象中，则不需要.enter（）。

如果你真的想使用JavaScript，你需要使用.on（"mouseover"，函数（d）{…}）来显示你的文本，使用.on"mouseout"，…）来隐藏它，但对于简单的标签，使用HTML自己的标签肯定更容易（我认为CSS的：悬停样式通常比不必使用JS更好）。

请尝试浏览Scott Murray的交互式Web数据可视化第10章中的工具提示部分。它比使用HTML标签稍微复杂一些，但它也可以提供更多的灵活性和功能。

工具提示的基本思想是，首先使用CSS标准在<style>部分中定义它们的外观。接下来，在<script>之前定义一个占位符，它将把类设置为"隐藏"。然后，在<script>部分中，定义mouseover和mouseout函数，它们定义（1）标签应该显示在哪里，（2）标签应该说什么，以及（3）将类从不可见切换到可见。

我也是一个初学者，但我确实只是为了这张地图才这么做的。相关代码片段为：

设置工具提示样式（在<style>标题中；这直接取自Scott Murray教程）：

        #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: 4px 4px 10px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            pointer-events: none;
        }
        #tooltip.hidden {
            display: none;
        }
        #tooltip p {
            margin: 0;
            font-family: sans-serif;
            font-size: 16px;
            line-height: 20px;
        }

接下来，设置一个工具提示占位符（在<body>中，在<script>上方）：

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

最后，mouseover函数：

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);
        };

mouseout函数留给读者练习。：）请注意，工具提示的显示与鼠标进入圆圈时的位置有关（这是mousecoord的内容）。

最后，在绘制所有圆时，只需调用mouseover和mouseout函数：

                    svg.selectAll("circle")
                       .data(data)
                       .enter()
                       .append("circle")
                           (blah blah)
                       .on("mouseover", mouseover)
                       .on("mouseout", mouseout);
相关文章：