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

【问题标题】：d3 transition overlap causing odd behaviourd3 过渡重叠导致奇怪的行为
【发布时间】：2014-05-03 19:51:13
【问题描述】：

将鼠标悬停在以下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);
});

【问题讨论】：

前面的转换被后面的转换简单地取代。在 Chrome 中，这不会导致问题——在某些时候，会显示正确的节点。你用的是什么浏览器？
你确定吗？我正在使用 Chrome，链接永远不会变得完全不透明。
是的，对我来说很好。

标签： javascript d3.js filter transition

【解决方案1】：

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

【讨论】：

这也解决了我的问题。感谢您解决这个问题。