d3过渡重叠导致奇怪的行为

Question

将鼠标悬停在以下jsfiddle中的某个节点上会导致所有其他节点和链接淡出，但连接到悬停节点的链接除外。

如果您将鼠标从一个节点缓慢移动到另一个节点，则可以正常工作。 但是，如果移动鼠标的速度过快，则连接到当前节点的链接将保持淡入淡出状态。

为什么会这样？我的目的是始终保持悬停节点和连接链接。

.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

罪魁祸首是致电transition()，然后致电filter()。如果你先过滤，然后触发转换，问题就消失了！ link to jsfiddle