[Solved]-Selecting path, changing opacity based on legend mouseover-d3.js

Issues with your code:

d3.selectAll('circle') selects all the circles in the body and as far as the paths are concerned:

d3.select('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
    d3.select(this.parentNode).selectAll('circle').style('opacity', 0.4);

    // change opacity of current circle
    d3.select(this).style('opacity', 0.9);

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

    // change opacity of path with data-legend = key
    d3.select(this.parentNode.parentNode.parentNode).select('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
    d3.select(this.parentNode).selectAll('circle').style('opacity', 0.9);
    d3.select(this.parentNode.parentNode.parentNode).select('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. :)