将鼠标放在圆上时显示标签

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

来源

2014-09-21 Tracy

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

假设dataGroup时是你的圈子中的一组，

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

这是超级简单。请注意，如果要添加到已绑定到数据的一组对象，则不需要使用.enter（）。（“mouseover”，function（d）{...}）来显示你的文本和.on（“mouseout”，...）。如果你想使用JavaScript，你需要使用。以隐藏它，但对于简单的标签，使用HTML自己的标签肯定更容易（我认为CSS的：悬停风格通常比采用JS更好，如果你不需要）。

来源

2014-09-21 07:02:58

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

使用工具提示的基本思想是，您首先使用CSS标准在<style>部分中定义它们的外观。接下来，你在你的<script>之前定义一个占位符，它将设置该类为“隐藏”。然后，在<script>部分中，您定义了mouseover和mouseout函数，这些函数定义（1）标签应显示的位置，以及（2）他们应该说的内容，以及（3）将类从不可见变为可见。

我也是一个初学者，但我从字面上就是这样做了这个map。相关的代码段包括：

样式化的工具提示（在<style>头;这是直接从斯科特默里教程截取）：

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

来源

2014-09-21 08:37:26

将鼠标放在圆上时显示标签

回答

相关问题