d3 transition overlap causing odd behaviour

Question

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);
});

Answer 1

The culprit is calling transition(), then filter(). If you first filter, and then trigger transition, the problem is gone! link to jsfiddle