Question

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

这是我的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的不透明度。

Answer 1

第一个问题： ID是唯一的。现在，您正在重复一些ID。根据您的问题标题判断，我将其更改为class。

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

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

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

＆＃13;

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.selectAll("circle").on("mouseover", function(){
  var thisClass = d3.select(this).attr("class");
  d3.selectAll("circle").attr("opacity", 0.5)
  d3.selectAll("." + thisClass).attr("opacity", 1)
}).on("mouseout", function(){
d3.selectAll("circle").attr("opacity", 1)
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

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

1 个答案: