CODEWITHSUNDEEP
javascriptd3.jspie-chart
user3281466
user3281466

Reputation: 491

d3 handling mouse events in charts

I am trying to make an interactive pie chart that reacts to mouse clicks. At the moment I made it possible for a tooltip to come up once a pie slice is clicked on. But how can I make it disappear if the user clicks again on the same slice? 

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

Upvotes: 2

Views: 767

Answers (1)

mdml
mdml

Reputation: 22882

If the data in your selection are objects, then you can store within each datum whether it's selected or not. For example,

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

Note that this ensures that all other arcs are deselected when you select a new arc.

Upvotes: 1

Related Questions