javascript - 在鼠标悬停 D3js 上选择元素的类

Question

我有一个非常简单的问题，但我找不到解决方案。我制作了一组圆圈，每个圆圈都分配了一个类(class)。在 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);

我为每个圆圈添加了 .on("mouseover", mouseover) 但我不知道如何编写函数。到目前为止，我只为在函数鼠标悬停中选择的类更改了属性。

提前致谢。

这是完整的代码

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

Answer 1

改变:

svg.selectAll(".fp_K") 

到

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