Accepted answer

Issues with your code:

d3.selectAll('circle') selects all the circles in the body and as far as the paths are concerned:'path id') wouldn't work as the selector itself is messed up here. Try console logging the selection here.

Option 1:

Try replacing the legend mouse events with the following code:

.on("mouseover", function(d) {
    // look for all the circles within the parent node'circle').style('opacity', 0.4);

    // change opacity of current circle'opacity', 0.9);

    // use parentNode to go until SVG and select all paths'g.paths').selectAll('path').style('opacity', 0.4);

    // change opacity of path with data-legend = key'g.paths').selectAll('path[data-legend="'+d.key+'"]').style('opacity', 0.9);
.on('mouseout', function(d) {
  // change all circles' and paths' opacity back to original values'circle').style('opacity', 0.9);'g.paths').selectAll('path').style('opacity', 0.9);

I hope the comments are clear enough to understand the code. Just parsing through the parentNodes.

Option 2:

Add a class/id to the legend group representing the "state" i.e. Alabama, California etc.

And search for the SVG with selectedState on every mouseover and change the paths' opacity.

Hope this helps. :)

Related Query

More Query from same tag