Dear Collective Wisdom,
I’m sure this is something simple but I haven’t been able to figure out why hover and fade doesn’t work on my chord diagram. I’ve looked at dozens of examples but none of them seem to work with my diagram.
I’m not a pro, just a dabbler, so I appreciate any assistance with this issue and anything else you might suggest for improvement.
Chord Diagram with Tooltips and Groups Opacity Fade
Here’s a fork with a few tweaks to get things working:
A few notes:
fade function had a reference to
svg which pointed to the standard library function
svg instead of the d3 selection
svg inside the
chart cell. Note that you can’t refer to the selection
svg from outside the
chart cell due to the way variables are scoped in Observable. I ended up moving
fade into the cell and changing it so that it referenced explicitly named selections
ribbons rather than trying to form selections from
fade only performs the fading of chords (and groups) that occurs when you mouseover/mouseout on a group. I added some code to the mouseover and mouseout events on the chord selection (which I named
ribbons) which performs suitable fading of the other chords / groups.
Feel free to ask if you’ve got more questions!
Thank you so much for not just fixing the issue but explaining why it wasn’t working. I know I’ve missed some essential fundamentals during my scattershot self-education of D3/Observable. I have learned a lot by studying your code, as well as other Observable experts, and appreciate you taking the time for this lesson as well!