Question

Working in D3.js, I’d like to select all the elements that match a selector except for the current element.

The reason is that I’d like to mouseover a circle, and have all the other circles with the same class turn light blue, but the current circle to stay the same shade.

This is what I have currently:

vis.selectAll('circle.prospect')
.on("mouseover", function(d) { 
     console.log(d);
    d3.selectAll('circle.prospect').transition().style('opacity','0.5');
    d3.select(this).attr('opacity','1.0');
  });

In jQuery, I could do this using not. Anyone know the D3.js equivalent?

Answer 1

An even simpler way to approach this would be using the power of D3’s operators:

vis.selectAll('circle.prospect').on("mouseover", function(d) {
    var circleUnderMouse = this;
    d3.selectAll('circle.prospect').transition().style('opacity',function () {
        return (this === circleUnderMouse) ? 1.0 : 0.5;
    });
});

There’s one difference here in that, unlike your original code, the circleUnderMouse element’s opacity will be smoothly animated as well. If it’s already fully opaque then probably not a big deal, otherwise you could use the .duration() operator in a similar fashion to speed the circleUnderMouse time to 0 and the others longer.