d3 차트의 마우스 이벤트 처리

Question

마우스 클릭에 반응하는 대화 형 원형 차트를 만들려고합니다. 지금은 파이 슬라이스를 클릭하면 툴팁을 올릴 수 있습니다. 그러나 사용자가 동일한 슬라이스를 다시 클릭하면 어떻게 사라지게 할 수 있습니까?

.on("click", function(d) { 
     tooltip.transition()   
     .duration(450)  
     .style("opacity", 0.7);  
     tooltip.html("<b>" + d.name + ": " + d.value + "</b>") 
     .style("left", (d3.event.pageX) + "px") 
     .style("top", (d3.event.pageY-20) + "px");  
    }); 

Answer 1

선택 항목의 데이터가 객체 인 경우 선택한 각 데이터 내에서 저장할 수 있습니다. 예를 들어,

.on("click", function(d, i) { 
    if (!d.selected){ 
     tooltip.transition()   
      .duration(350)  
      .style("opacity", 0.9);  
     tooltip.html("<b>" + stats[i].status + ": " + d.value + "</b>") 
      .style("left", (d3.event.pageX) + "px") 
      .style("top", (d3.event.pageY-margin*0.8) + "px"); 
     d.selected = true; 

     // deselect all other arcs 
     arcs.each(function(d, j){ 
      if (i != j) d.selected = false; 
     }); 
    } 
    else { 
     tooltip.transition()   
       .duration(200)  
       .style("opacity", 0); 
     d.selected = false; 
    } 
});     

새 호를 선택할 때 다른 모든 호가 선택 취소됩니다.