觸發懸停事件<g>元素在D3圖

Question

所以我有一個圖繪製使用d3庫，它添加了一個元素的負載形成一個餅圖。餅圖中的每個「切片」都有「.nv-slice」類。我期望做的是循環瀏覽這些切片中的每一個，並根據特定標準觸發懸停事件（對問題不重要）。

在我的CSS中，我有一個.nv-slice：hover類，它覆蓋了d3類;在元素上正常懸停（如實際上，將鼠標移動到其上），這個優先級就會被覆蓋。但是，試圖用$(g_element).trigger('hover')做到這一點失敗。我研究過它，結果發現jQuery不能像svg/g元素一樣使用。

我通過摹元素循環使用細

$.each($('#gender_chart .nv-slice'), function(i, value) { ... }); 

但隨後，如上所述，我不能用

$(value).trigger('hover'); 

因爲jQuery的不兼容。所以我的問題是這樣的：假設我像這樣循環，如何觸發懸停事件的g元素？

Answer 1

顯然，您不能以編程方式觸發懸停事件，因爲懸停不是trusted事件（另請參閱Trigger css hover with JS）。你可以做的是添加一個類來爲mouseover上的元素添加一個類，並在mouseout上移除該類。

d3.selectAll('.nv-slice') 
    .on('mouseover', function() { d3.select(this).classed('hover', true); }) 
    .on('mouseout', function() { d3.select(this).classed('hover', false); });