1

我有一个非常简单的问题，但我找不到解决方案。我做了一组圆圈，每个圆圈都分配了一个班级。在 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) 但我不知道如何编写函数。到目前为止，我只为在函数 mouseover 中选择的类更改了属性。

提前致谢。

这是整个代码

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

4

2 回答 2

3

改变：

svg.selectAll(".fp_K")

到

svg.selectAll("." + this.getAttribute('class'))
于 2013-09-09T04:35:18.123 回答
1

采用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;
      });
});

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

于 2013-09-09T04:34:35.490 回答