Nhiều sự kiện di chuột qua d3.tip

Question

Tôi đang cố gắng thay đổi đột quỵ của phần tử svg cũng có d3.tip được gọi.

Phần liên quan của mã của tôi trông như sau:

map.call(tip); 

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

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

tôi có thể làm cho mã của tôi làm một sự kiện: đã đột quỵ của nó thay đổi khi rê chuột, hoặc hiển thị một tooltip. Nhưng tôi không thể làm cho hai sự kiện xảy ra đồng thời.

Có ai đã thành công với mẹo d3 trước và các sự kiện chuột bổ sung trước đây không?

Answer 1

Tôi đã kết thúc việc cần chuyển đối tượng dữ liệu vào hàm tip.show().

Mã cuối cùng:

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

Tôi đã không thử nó, nhưng điều này cũng có thể làm việc:

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

Answer 2

đối với tôi điều này làm việc

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