Select the class of an element on mouseover D3js

Question

I have a very easy problem but I couldn't find the solution. I made a groups of circles each one with a class assigned. On mouseOver, I want to change the properties of the all the circles with the same class that the circle where the mouse is over.

this is my code

svg.selectAll(".filas")
                    .data(new Array(18))
                    .enter().append("g")
                    .attr("class","filas")
                    .attr("transform", function (d,i) { return "translate(400," + ((20*i)+20) + ")";})
                    .selectAll("circle")
                    .data(function () {
                        return new Array(4);
                    })
                    .enter().append("circle")
                    .attr("cy", 0)
                    .attr("cx", function (d,i) {return -1 * (i+4) * 30;})
                    .attr("r", 10);

        //set classes to circles

                svg.selectAll("circle")
                    .data(data)
                    .attr("class", function(d) {
                        return (d) ? "fp_" + d : null;
                    })
                    .on("mouseover", mouseover)
                    ;



                function mouseover(clase) {

                         svg.selectAll(".fp_K")
                            .transition()
                            .duration(500)
                            .style("opacity", .2);

I added .on("mouseover", mouseover) for each circle but I don't know how to write the function. So far I achieved change the property only for the class which is selected in the function mouseover.

Thanks in advance.

Here is the whole code

http://jsfiddle.net/ploscri/t5ams/

Answer 1

Change:

svg.selectAll(".fp_K") 

to

svg.selectAll("." + this.getAttribute('class'))

Answer 2

Use selection. filter ( selector ) selection. filter ( selector )

circles.on('mouseover', function() { 
  var self      = d3.select(this),
      c         = self.attr('class'),
      selection = circles.filter(function() {
        return d3.select(this).attr('class') === c;
      });
});

Think you can take it from here?