Javascript 除悬停的类外，所有d3.svg.circles上的不透明度更新

完全陷入这个问题。 目标是当用户悬停在某类数据上时，能够突出显示散点图（基于集群）上的某些数据点。我已将问题简化为以下代码。两组数据

以下是我的JS代码：

var svg = d3.selectAll("body").append("svg").attr("width",500).attr("height",500);

svg.append("circle").attr("cx",50).attr("cy",60).attr("r",5).attr("id","circle1");
svg.append("circle").attr("cx",70).attr("cy",100).attr("r",5).attr("id","circle1");
svg.append("circle").attr("cx",50).attr("cy",90).attr("r",5).attr("id","circle2");
svg.append("circle").attr("cx",70).attr("cy",70).attr("r",5).attr("id","circle2");

以下是我的CSS代码：

svg:hover circle {
  opacity: 0.5;
}
svg:hover #circle1:hover ~ #circle2 {
  opacity: 1;
}
svg:hover #circle2:hover ~ #circle1 {
  opacity: 1;

---

前两个CSS组件可以工作，但在circle2上悬停不会改变circle1的不透明度。

第一个问题：ID是唯一的。现在，你在重复一些ID。根据你问题的标题判断，我将它们改为

类

这是一种基于类更改不透明度的简单方法。首先，获得悬停元素的类：

var thisClass = d3.select(this).attr("class");

然后，根据类设置不透明度。以下是一个片段：

var svg=d3.selectAll（“body”）.append（“svg”）.attr（“width”，500）.attr（“height”，500）；
svg.append（“circle”）.attr（“cx”，50）.attr（“cy”，60）.attr（“r”，5）.attr（“class”，“circle1”）；
svg.append（“circle”）.attr（“cx”，70）.attr（“cy”，100）.attr（“r”，5）.attr（“class”，“circle1”）；
svg.append（“circle”）.attr（“cx”，50）.attr（“cy”，90）.attr（“r”，5）.attr（“class”，“circle2”）；
svg.append（“circle”）.attr（“cx”，70）.attr（“cy”，70）.attr（“r”，5）.attr（“class”，“circle2”）；
d3.选择所有（“圆圈”）。在（“鼠标悬停”，函数（）上）{
var thisClass=d3.select（this.attr）（“类”）；
d3.选择全部（“圆形”）.attr（“不透明度”，0.5）
d3.选择全部（“.”+thisClass）.attr（“不透明度”，1）
}).on（“mouseout”，函数（）{
d3.选择全部（“圆形”）.attr（“不透明度”，1）
});
谢谢，为了简化我留下的问题，数据实际上是csv加载的，这似乎会扰乱类的选择。嵌入代码会将不透明度更改为0.5，但不会突出显示选定的类。你说的高光是什么意思？清楚地解释期望的结果是什么。将当前为“mouseover”的类的不透明度更改为1。我发布了一个代码链接，在“mouseover”上所有节点的不透明度都变为0.5，但没有节点的不透明度设置为1。您发布的代码正是我想要的行为，但如果我从CSV加载数据，它似乎不起作用。