d3在圖表中處理鼠標事件

我正在嘗試製作一個對鼠標點擊有反應的交互式餅圖。目前，我一旦點擊了一個餅圖切片，就可以提供一個工具提示。但是如果用戶再次點擊同一個切片，我怎麼能讓它消失呢？d3在圖表中處理鼠標事件

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

來源

2014-06-20 user3281466

如果您選擇的數據是對象，那麼您可以在每個數據中存儲它是否被選中。例如，

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

請注意，這樣可以確保在選擇新弧段時取消選擇所有其他弧線。

來源

2014-06-20 14:01:44 mdml

你的意思是我需要爲稱爲'selected'的數據對象添加另一個屬性？ – user3281466

@ user3281466：類似的，是的。你的數據是什麼樣的？如果它是一個對象數組，比我發佈的代碼示例應該工作... – mdml

嘿，謝謝你的工作，但有一個小問題，因爲如果我點擊一個片然後點擊另一個然後回到第一個然後沒有任何事情會發生，因爲它仍然記得它被點擊......見下面： on（「click」，function（d）{ if（！d.selected）{ tooltip.transition（） .duration（450 ） .style（「opacity」，0.7）; tooltip.html（「」+ d.name +「：」+ d.value +「」） .style（「left」，（d3.event。 pageX）+「px」） .style（「top」，（d3.event.pageY-20）+「px」）; d.selected = true; } else {tooltip.transition（） .duration（250） .style（「opacity」，0）; d.selected = false;} }）; – user3281466

d3在圖表中處理鼠標事件

回答

相關問題