Выберите класс элемента на mouseover D3js

Question

У меня очень простая проблема, но я не смог найти решение. Я сделал группы кругов, каждый из которых был присвоен классом. На mouseOver я хочу изменить свойства всех кругов с тем же классом, что и круг, где находится мышь.

это мой код

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); 

Я добавил .он («Mouseover», Mouseover) для каждого круга, но я не знаю, как написать функцию. До сих пор я добился изменения свойства только для класса, выбранного в функции mouseover.

Заранее спасибо.

Вот весь код

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

Answer 1

Изменение:

svg.selectAll(".fp_K") 

в

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

Answer 2

Использование 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; 
     }); 
}); 

Думаю, вы можете взять его отсюда?