Mouseover events in D3 v4 Chord Diagram - d3.js

Question

I'm trying to make a D3 chord diagram following Mike Bostock's v4 example and a v3 example with mouseover events.
In the v3 example above, there is a fade function that highlights specific ribbbons for a mouseover'd group:
function fade(opacity) {
return function(d, i) {
svg.selectAll("ribbons")
.filter(function(d) {
return d.source.index != i && d.target.index != i;
})
.transition()
.style("opacity", opacity);
};
}
Though for the life of me I can't get it working in my v4 example, despite trying to put it in a similar spot:
//Draw the ribbons that go from group to group
g.append("g")
.attr("class", "ribbons")
.selectAll("path")
.data(function(chords) { return chords; })
.enter().append("path")
.attr("d", ribbon)
.style("fill", function(d) { return color(d.target.index); })
.style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); })
.on("mouseover", fade(.1)) /* Where attempt at mouseover is made */
.on("mouseout", fade(1));
.append("title").
text(function(d){return chordTip(d);})
Here is a jsfiddle with my attempt (with working tooltips, but non-working fade mouseovers): https://jsfiddle.net/wcat76y1/3/
I believe my error has something to do with how I'm segregating variables, but I'm not sure how exactly where I went wrong.

Answer 1

I found part 2 of the previous answer didn't work for me but this did.
function fade(opacity) {
return function(d, i) {
d3.selectAll("g.ribbons path")
.filter(function(d) {
return d.source.index != i && d.target.index!= i;
})
.transition()
.style("opacity", opacity);
};
}
The line you had with just ribbons didn't seem to select the right element. I agree with the first corrections you did, but didn't use the text elements.
Here's my forked fiddle https://jsfiddle.net/kLe38tff/

Answer 2

I managed to figure it out. Looks like there were several issues that combined to obfuscate my attempted solutions. While I can mark this as solved, there are still some elements to my solution that I don't understand .
I was adding the mouseover events to the wrong section (DOM element?). It should have been added to the operations on the group elements not ribbon elements. Hence, it should have gone here:
//Draw the radial arcs for each group
group.append("path")
.style("fill", function(d) { return color(d.index); })
.style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
.attr("d", arc)
.on("mouseover", fade(.1))
.on("mouseout", fade(1))
Using svg.selectAll("ribbons") in the fade function was not selecting the elements I wanted (I'm still not sure why not...). Replacing that command with just the variable ribbons allowed the selection to complete successfully:
function fade(opacity) {
return function(d, i) {
ribbons
.filter(function(d) {
return d.source.index != i && d.target.index != i;
})
.transition()
.style("opacity", opacity);
};
}
Adding <text> elements to the variable ribbons during its creation led to the opacity being modified on the text element instead of the ribbon element itself. Separating this to a separate line of code fixed the final issue.
The updated JSFiddle shows the fully working example: https://jsfiddle.net/wcat76y1/5/