показать метку, когда мышь над кругом

Я начинающий для 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.append("title") 
    .text(function(d) {return d["state"]});

который очень прост. Обратите внимание, что вам не нужно .enter(), если вы добавляете к набору объектов, которые уже привязаны к данным.

Если вы хотите использовать JavaScript, вам нужно будет использовать .on («mouseover», function (d) {...}), чтобы отобразить ваш текст и .on («mouseout», ...) чтобы скрыть его, но для простых ярлыков определенно проще использовать собственные ярлыки HTML (и я думаю, что стиль CSS: стиль наведения часто лучше, чем прибегать к JS, если вам не нужно).

источник

2014-09-21 07:02:58

Попробуйте изучить раздел всплывающей подсказки в Chapter 10 of Scott Murray's Interactive Data Visualization for the Web. Это немного сложнее, чем использование ярлыков HTML, но также может обеспечить большую гибкость и функциональность.

Основная идея с подсказками заключается в том, что вы сначала определяете их внешний вид в своем разделе <style>, используя стандарты CSS. Затем вы определяете местозаполнитель перед вашим <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

показать метку, когда мышь над кругом

ответ

Смежные вопросы