Question

我是JavaScript的初学者。我想在鼠标结束时显示标签，在鼠标离开时消失。这是我的代码。现在，它显示了圈子的所有标签。

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

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

如果您确实想使用JavaScript，则需要使用.on（“mouseover”，function（d）{...}）来显示文本和.on（“mouseout”，...）到隐藏它，但对于简单的标签来说，使用HTML自己的标签肯定更容易（我认为CSS：悬停风格通常比使用JS更好，如果你不需要）。

Answer 2

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

使用工具提示的基本想法是，您首先使用CSS标准在<style>部分中定义其外观。接下来，您在<script>之前定义占位符，这会将类设置为隐藏＆＃39;。然后，在<script>部分中，您定义mouseover和mouseout函数，这些函数定义（1）标签应显示的位置，以及（2）他们应该说什么，以及（3）将类从不可见切换为可见。

我也是初学者，但我确实只为这个map做了这个。相关的代码片段是：

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

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

2 个答案: