css - 如何更改 SVGCircleElement 对象的样式？

Question

在我的散点图中，我想更改鼠标悬停时圆圈的样式(不透明度/颜色)以及所有其他共享相同类名的圆圈。

但是 groupList[i].style("opacity", .6); 似乎不是正确的方法。

var mouseOver = function() { 
    var circle = d3.select(this);

    var highlitedGroup = this.className.baseVal;

    var groupList = document.getElementsByClassName(highlitedGroup);

    // The styling for the circle which mouse is over it.     
    circle.transition()
        .duration(800).style("opacity", 1)
        .attr("r", 16).ease("elastic");

    // For the all other circles which have the same className do this styling  
    for (var i=0; i<groupList.length; i++) {
               // List of SVGCircleElement objects  
                groupList[i].style("opacity", .6); //??
        }     
}

Answer 1

因为您已经在使用 D3.js，所以我建议您尽可能在整个代码中坚持使用它。在这种情况下，您的函数基本上可以归结为两个语句，其中第一个语句操纵主圆，而第二个语句将处理具有相同类的所有圆。

var mouseOver = function() {

  // The styling for the circle which mouse is over it.     
  d3.select(this).transition()
    .duration(800).style("opacity", 1)
    .attr("r", 16).ease("elastic");

  // For the all other circles which have the same className do this styling  
  d3.selectAll("." + this.className)
    .style("opacity", .6);

}

请注意，这仅在只有一个类(class)分配给主圈子时才有效。如果为该元素分配了多个类，this.className 将包含一个以空格分隔的类名称列表，以打破选择。