我正在研究以下径向图：
//Fade out all players except the first player
g.selectAll(".teamArc")
.attr("opacity", 0.6);
g.selectAll(".teamCircle")
.attr("opacity", 0.6);
//Select the first player by default
var firstPlayer = arcAndCircleG.first();
firstPlayer.select(".teamArc")
.classed("active", true)
.attr("id", "selected")
.attr("stroke", "green")
.attr("stroke-width", "1px")
.attr("opacity", 1);
firstPlayer.select(".teamCircle")
.classed("active", true)
.attr("id", "selected")
.attr("stroke", "green")
.attr("stroke-width", "1px")
.attr("opacity", 1);
teamCircles.on("mouseover", function(d,i){
g.selectAll(".teamArc").transition()
.duration(200)
.attr("opacity", function(d,j){
return j != i ? 0.6 : 1;
});
g.selectAll(".teamCircle").transition()
.duration(200)
.attr("opacity", function(d,j){
return j != i ? 0.6 : 1;
});
});
teamCircles.on("mousemove", function(d){
d3.select(this)
.classed("hover", true)
.attr("stroke", "black")
.attr("stroke-width", "1px");
d3.select(this.parentNode)
.select(".teamArc")
.classed("hover", true)
.attr("stroke", "black")
.attr("stroke-width", "1px");
});
teamCircles.on("mouseout", function(d){
g.selectAll(".teamCircle")
.transition()
.duration(200)
.attr("opacity", 1);
g.selectAll(".teamArc")
.transition()
.duration(200)
.attr("opacity", 1);
d3.select(this)
.classed("hover", false)
.attr("stroke", "black")
.attr("stroke-width", "0px");
d3.select(this.parentNode)
.select(".teamArc")
.classed("hover", false)
.attr("stroke", "black")
.attr("stroke-width", "0px");
});
teamCircles.on("click", function(d){
console.log("selected");
g.selectAll(".teamCircle")
.attr("opacity", 0.6)
.attr("stroke-width", "0px");
g.selectAll(".teamArc")
.attr("opacity", 0.6)
.attr("stroke-width", "0px");
d3.select(this)
.classed("clicked", true)
.attr("opacity", 1)
.attr("stroke", "green")
.attr("stroke-width", "2px");
d3.select(this.parentNode)
.select(".teamArc")
.classed("clicked", true)
.attr("opacity", 1)
.attr("stroke", "green")
.attr("stroke-width", "2px");
})
teamArcs.on("mouseover", function(d,i){
//The following bit of code adapted from http://bl.ocks.org/WillTurman/4631136
g.selectAll(".teamArc").transition()
.duration(200)
.attr("opacity", function(d,j){
return j != i ? 0.6 : 1;
});
g.selectAll(".teamCircle").transition()
.duration(200)
.attr("opacity", function(d,j){
return j != i ? 0.6 : 1;
});
// var clickedCircle = g.selectAll(".teamCircle")
// .filter("active");
// var clickedArc = g.selectAll(".teamArc")
// .filter("active");
// clickedArc.attr("fill", "green");
// console.log(clickedCircle);
// console.log(clickedArc);
});
teamArcs.on("mousemove", function(d){
d3.select(this)
.classed("hover", true)
.attr("stroke", "black")
.attr("stroke-width", "1px");
d3.select(this.parentNode)
.select(".teamCircle")
.classed("hover", true)
.attr("stroke", "black")
.attr("stroke-width", "1px");
});
teamArcs.on("mouseout", function(d){
g.selectAll(".teamArc")
.transition()
.duration(200)
.attr("opacity", "1");
d3.select(this)
.classed("hover", false)
.attr("stroke", "black")
.attr("stroke-width", "0px");
d3.select(this.parentNode)
.select(".teamCircle")
.classed("hover", false)
.attr("stroke", "black")
.attr("stroke-width", "0px");
g.selectAll(".teamCircle")
.transition()
.duration(200)
.attr("opacity", 1);
});
默认情况下，我希望第一个“播放器”（弧和圆圈）处于活动状态。当用户盘旋在另一个圆弧或圆圈上时，除了活动的一次和正在悬停的一次之外的所有弧和圆都应该渐变为不透明度0.6。
我遇到的问题是，当我悬停时，所有的圆弧和圆圈（包括活动圆弧）都会逐渐消失。
请参阅小提琴：JSFiddle
答案 0 :(得分：2)
您可以使用“有效”类过滤您的选择并拒绝元素。
teamArcs.on("mouseover", function(d, i) {
//The following bit of code adapted from http://bl.ocks.org/WillTurman/4631136
console.log("hello");
g.selectAll(".teamArc")
.filter(function() {
return !this.classList.contains('active')
})
.transition()
.duration(200)
.attr("opacity", function(d, j) {
return j != i - 1 ? 0.6 : 1;
});
g.selectAll(".teamCircle").transition()
.filter(function() {
return !this.classList.contains('active')
})
.duration(200)
.attr("opacity", function(d, j) {
return j != i - 1 ? 0.6 : 1;
});
});