Eventi di passaggio del mouse multipli con d3.tip

Question

Sto provando a cambiare il tratto di un elemento svg che ha anche d3.tip chiamato su di esso.

La parte rilevante del mio codice si presenta come segue:

map.call(tip); 

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

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

sono in grado di fare il mio codice di fare un evento: hanno cambiato la sua corsa al passaggio del mouse, o mostrare un tooltip. Ma non posso far accadere i due eventi contemporaneamente.

Qualcuno ha avuto successo con d3 tip before e altri eventi mouse prima?

Answer 1

Alla fine ho dovuto passare l'oggetto dati alla funzione tip.show().

Il codice finale:

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

non l'ho provato, ma questo potrebbe anche funzionare:

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

Answer 2

per me questa cosa funzionato

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