The culprit is calling transition()
, then filter()
. If you first filter, and then trigger transition, the problem is gone! link to jsfiddle
d3 transition overlap causing odd behaviour
-
14-07-2023 - |
Pergunta
Hovering over a node in the following jsfiddle causes all other nodes and links to fade out except for the link connected to the hovered node.
This works as intended if you move the mouse from one node to another slowly. However if you move the mouse too fast the link connected to the current node stays faded.
Why is this happening? My intent is to always have the hovered node and connected link visible.
.on("mouseover", function(d) {
svg.selectAll(".node").filter(function(other) {
return (other.name != d.name);
})
.transition()
.duration(750)
.style('opacity', 0.1);
svg.selectAll(".link")
.transition()
.filter(function(other) {
return (other.source.name != d.name) && (other.target.name != d.name);
})
.duration(750)
.style('opacity', 0.1);
})
.on("mouseout", function(d){
svg.selectAll(".node, .link")
.transition()
.duration(750)
.style('opacity', 1.0);
});
Solução
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow