javascript - d3 处理图表中的鼠标事件

Question

我正在尝试制作一个对鼠标点击使用react的交互式饼图。目前，我可以在单击饼图切片后出现工具提示。但是如果用户再次点击同一个切片，我怎样才能让它消失呢？

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

请注意，这可确保在您选择新弧时取消选择所有其他弧。