[D3] Deselect previous this-elements

Community Help
1

Hi,
in my D3 chord diagram i want to hover over a ribbon and unhighlight everything except “this” (hovered element). The mouseout-event sets everything back to normal.

But when i continue hovering over other ribbons, the previous hovered ribbons get also highlighted.

How can i deselect the previous hovered elements? Or how can i include them in d3.selectAll(“#chordgraph g”) again?

My code shortened to the relevant excerpts:

 const svg = d3.create("svg")
    ...
    .attr("id", "chordgraph");

svg.append("g")
    .attr("fill-opacity", 0.75)
    .selectAll()
    .data(chords)
    .join("path")
    .attr("d", ribbon)
    .on('mouseover', function (d, i) {
      d3.selectAll("#chordgraph g").attr("fill-opacity", 0.1);
      d3.select(this).attr("fill-opacity", 1);
    })
    .on('mouseout', function (d, i) {
      d3.selectAll("#chordgraph g").attr("fill-opacity", 0.75);
    })

Best regards
jellyFish