鼠标悬停在圆圈上时显示标签答案

【问题标题】：show label when mouse over a circle鼠标悬停在圆圈上时显示标签
【发布时间】：2014-09-21 03:09:24
【问题描述】：

我是 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"]});

【问题讨论】：

标签： javascript d3.js charts mouseover

【解决方案1】：

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

假设 dataGroup 是您的一组圈子，

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

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

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

【讨论】：

【解决方案2】：

尝试探索Chapter 10 of Scott Murray's Interactive Data Visualization for the Web 中的工具提示部分。它比使用 HTML 标签要复杂一些，但它还可以提供更多的灵活性和功能。

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

我也是一个初学者，但我确实只是为这个map 做了这个。相关代码sn-ps为：

设置工具提示的样式（在 <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);

【讨论】：