Несколько событий mouseover с d3.tip

Question

Я пытаюсь изменить ход элемента svg, который также вызывает d3.tip.

Соответствующая часть моего кода выглядит следующим образом:

map.call(tip); 

    map.on("mouseover", function(){ d3.select(this).style({stroke:"#7bd362"}); tip.show; }); 

    map.on("mouseout",tip.hide); 

Я могу сделать свой код сделать одно событие: у его ход изменился при наведении курсора мыши, или показать всплывающую подсказку. Но я не могу сделать эти два события одновременно.

У кого-нибудь был успех с подсказкой d3 перед и дополнительными событиями мыши раньше?

Answer 1

В итоге мне пришлось передать объект данных в функцию tip.show().

Окончательный код:

map.on("mouseover", function(d){ 
    tip.show(d); 
}) 
.on("mouseout", function(d){ 
    tip.hide(d);   
}); 

Я не пробовал, но это также может работать:

map.on("mouseover", tip.show).on("mouseout", tip.hide); 

Answer 2

для меня эта вещь работала

rect.filter(function(d) { return d in data; }) 
     .on("click", function(d){ 
      var year = d/10000; 
      year = Math.floor(year); 
      var monthInt = d/100; 
      var val = 0,id; 
      for(var itr=0; itr<$rootScope.dom_elements.length; ++itr) { 
      if(dom_element_to_append_to == $rootScope.dom_elements[itr].primary) { 
       val = itr; 
       break; 
      } 
     } 
     monthInt = Math.floor(monthInt % 100); 
     for (var itr = 0; itr<12; ++itr) { 
      id = month[itr] + "" + varID; 
      $('#' + id).css("z-index",0); 
      $('#' + id).css("stroke","#000"); 
      $('#' + id).css("stroke-width", "2.5px"); 
     } 
     id = month[monthInt-1] + "" + varID; 
     currentPathId = id; 
     $('#' + id).css("stroke","orange"); 
     $('#' + id).css("position","relative"); 
     $('#' + id).css("z-index",1000); 
     $('#' + id).css("stroke-width", "4.5px"); 
     $rootScope.loadDayHourHeatGraph(year, monthInt , val, isCurrency); 
    }) 
     .attr("fill", function(d) { return color(Math.sqrt(data[d]/Comparison_Type_Max)); }) 
     .on('mouseover', function(d) { 

      tip.show(d); 
      var year = d/10000; 
      year = Math.floor(year); 
      var monthInt = d/100; 
      monthInt = Math.floor(monthInt % 100); 

      var id = month[monthInt-1] + "" + varID; 
      if(id!=currentPathId) { 
      $('#' + id).css("stroke","orange"); 
      $('#' + id).css("position","relative"); 
      $('#' + id).css("z-index",-1000); 
      $('#' + id).css("stroke-width", "4.5px"); 
     } 

    }) 
     .on('mouseout', function(d) { 

      tip.hide(d); 
      var year = d/10000; 
      year = Math.floor(year); 
      var monthInt = d/100; 
      monthInt = Math.floor(monthInt % 100); 

      var id = month[monthInt-1] + "" + varID; 
      if(id != currentPathId) { 
      $('#' + id).css("z-index",-1000); 
      $('#' + id).css("stroke","#000"); 
      $('#' + id).css("stroke-width", "2.5px"); 
     } 
    });