Wiele zdarzeń mouseover z d3.tip

Question

Próbuję zmienić obrys elementu svg, który również wywołał d3.tip.

Odpowiednia część mojego kodu wygląda następująco:

map.call(tip); 

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

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

jestem w stanie uczynić mojego kodu zrobić jedno wydarzenie: mieć udar zmieniło po najechaniu myszą, lub pokazać etykietkę. Ale nie mogę sprawić, aby te dwa wydarzenia zdarzyły się jednocześnie.

Czy ktoś wcześniej miał sukces z końcówką d3 przed i dodatkowe zdarzenia myszy?

Answer 1

Skończyło się na konieczności przekazania obiektu danych do funkcji tip.show().

Kod końcowy:

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

nie próbowałem, ale może to również pracować:

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

Answer 2

dla mnie to coś działało

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