Trigger hover event on element in d3 graph

Question

So I have a graph drawn using the d3 library, which adds a load of elements to form a pie chart. Each 'slice' of the pie chart has the class '.nv-slice'. What I'm looking to do is loop through each of these slices and fire the hover event based on a particular criterion (not important to the question).

In my css, I have a .nv-slice:hover class which overrides the d3 class; upon a normal hover on the element (as in, actually moving my mouse over it) this overrides fine. However, trying to do it with $(g_element).trigger('hover') fails. I've looked into it, and it turns out jQuery can't be used like this on svg/g elements.

I'm looping through the g elements fine using

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

but then, as stated, I can't use

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

because of the jQuery incompatibility. So my question is this: assuming I'm looping through like this, how do I trigger the hover event the g elements?

Answer 1

Apparently you can't trigger the hover event programmatically, because hovering is not a trusted event (see also Trigger css hover with JS). Whan you can do is to add a class to add a class to the elements on mouseover, and remove the class on mouseout.

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