d3.js - 如何在出現鼠標事件時再次顯示和絃

Question

我正在使用d3.js調整以下chords example以顯示組之間的關係。有人可以解釋和絃在退出後如何顯示出來。

我很感興趣的是將一個處理程序連接到這個來顯示信息並讓它在mouseout上消失。

有一個鼠標懸停處理程序，它將淡入淡出類添加到路徑元素，但我看不到任何代碼將其刪除。

<path class="chord fade" d=<elided> style="fill: rgb(247, 129, 191);"> 
    <title>Financial District → Western Addition: 1.1%Western Addition → Financial District: 1.1%</title> 
</path> 

儘管如此，當我將鼠標移出一組時，淡出的和絃重新出現。我的問題是如何實現的？

爲了方便這裏是發揮的jsfiddle：http://jsfiddle.net/huynhjl/hxby165d/7/

我知道這個問題/答案D3.js Chord diagram - Have text appear/disappear when hovering over an arc的，但我想知道原來的展示是如何做的。

Answer 1

這個看似奇怪的行爲是用css完成的。

發生了什麼腳本是，當一條路徑將觸發mouseover事件，處理程序選擇和絃所有，併爲每一個，切換fade類或關閉，根據該和絃是否連接到懸架元件還是不連接。

那麼，如何處理fade類？退房，實際上隱藏元素的選擇：

#circle:hover path.fade { 
    display: none; 
} 

什麼是CSS規則是真正的意思是：

時，有一類「變臉」的<路徑>元素是後代一個id爲「circle」的懸停元素，將其「display」屬性設置爲「none」。

換句話說，fade類不會隱藏元素，除非具有id爲#circle的g元素被隱藏。因此，當鼠標不在該組中時，即使路徑仍具有fade類，路徑也會再次可見。

Answer 2

如果您使用的引導您的網站，那麼甚至可將

#circle:hover path.fade { 
    display:none; 
} 

這是由於自舉已經有淡入類出現同樣的問題！

爲了解決這個問題，我改變了我的D3類是 「fadechord」，現在有：

#circle:hover path.fadechord { 
    display:none; 
} 

，然後在鼠標懸停監聽器，我有：

  function mouseover(d, i) { 
       chord.classed("fadechord", function(p) { 
        return p.source.index != i 
          && p.target.index != i; 
       }); 
      }