I came across an interesting tutorial on how to create chord diagrams in D3, which I'm currently experimenting with. The tutorial can be found at
One example that caught my attention is about hair color preferences. When you hover over a group on the circle's edge, it displays only the related chords, and as soon as you move the mouse away, all the other chords reappear.
This functionality seems to be achieved by adding the "fade" CSS class dynamically to hide certain chords. A piece of CSS code then takes care of hiding them when hovered over.
#circle:hover path.fade {
display: none;
}
While this works seamlessly in Chrome, testing it in IE11 revealed a bug - once you hover over one group, the remaining chords never seem to redraw when moving the mouse outside the circle.
Upon inspecting the issue in the IE11 debugger, I discovered that simply modifying a DOM property resolves the problem. However, I am struggling to implement this fix in my code.
I've put together a fiddle with all the details here https://jsfiddle.net/49dym52r/
Any assistance or insight would be greatly appreciated!