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

我为每个圆圈添加了.on（“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;
      });
});

认为你可以从这里拿走它？

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

2 个答案: