将鼠标悬停在以下 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);
});
最佳答案
罪魁祸首是调用 transition()
,然后是 filter()
。如果先filter,再触发transition,问题就没有了! link to jsfiddle
关于javascript - d3 过渡重叠导致奇怪的行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23449087/