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

मैं एक घटना मेरी कोड बनाने के लिए कर रहा हूँ: अपने स्ट्रोक माउसओवर पर बदल गया है, या एक टूलटिप दिखाने की है। लेकिन मैं दो घटनाओं को एक साथ नहीं कर सकता।

क्या किसी को पहले डी 3 टिप और अतिरिक्त माउस ईवेंट से पहले सफलता मिली है?

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