javascript - 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()。如果先filter，再触发transition，问题就没有了! link to jsfiddle