Question

我正在使用D3的进入/退出选择，我也希望在鼠标悬停事件上添加转换。

问题在于，如果我在移动时将鼠标悬停在字母上，它们会冻结，因为位置转换会中断。

这是一个JSFiddle，演示了这个问题：http://jsfiddle.net/uEuE4/1/这是我用来将鼠标悬停事件添加到更新并输入选择的代码：

text
.on('mouseover', function(d) { 
  d3.select(this).transition().duration(100).style('fill', 'yellow');
});

如何在完成所有其他转换后才添加mouseover事件处理程序，以阻止字母冻结？

任何使代码更干的提示也会非常受欢迎。

Answer 1

您可以为转换分配名称，然后只有具有相同名称的新转换才会中断此转换。

text
.on('mouseover', function(d) { 
  d3.select(this).transition("fillColor").duration(100).style('fill', 'yellow');
});

Answer 2

我还遇到了鼠标悬停中断转换的问题，并提出了以下（当然是hacky）解决方案：在转换之前，将css样式pointer-events: none添加到svg元素;然后在过渡后删除它。实际上，我发现将样式应用于包含svg的元素更加可靠。

E.g：

<div class="chart-container">
    <svg></svg>
</div>

然后：

$('.chart-container').addClass('no-mouse');
d3.select("svg").on("mouseover", function(d) {...})
    .on("mouseout", function(d) {...})
    .transition()
        .duration(animDuration)
        .attr("...", ...);
setTimeout(function() {
    $('.chart-container').removeClass('no-mouse');
}, animDuration+10);

使用css：

.no-mouse {
    pointer-events: none;
}

可在Firefox，Safari，Chrome甚至IE 8中使用。但渴望听到更清晰的解决方案。

Answer 3

我赞成并同意@Jason的答案，这将尝试完成前面的一些澄清和一个简单的演示，可以用作多个过渡行为的游乐场。

检查你的代码你有不同的动画，但只需要命名其中两个来摆脱你所有的过渡“colisions”，
两个事件监听器：

text.on('mouseover', function(d) {
        d3.select(this).transition("texTr").duration(100).style('fill', 'yellow');
});

enter_text.on('mouseover', function(d) {
        d3.select(this).transition("enterTexTr").duration(100).style('fill', 'yellow');
});

长篇大论是没有名字D3认为代码中的所有过渡都是相同的，因此他停止了正在进行的过渡（一个例子可以是一个字母过渡）并用一个新的替换它（例如填充）由事件监听器调用的转换），因为转换名称是相同的。

但有时期望的行为是明确停止某些元素的转换;这可以使用.interrupt("transitionName")：

完成

.on("mouseover", function() {
        d3.select(this).interrupt("fadeOut")
        .attr("fill", "orange")
})

.on("mouseout", function(d) {
        d3.select(this).transition("fadeOut")
            .duration(5000)
            .attr("fill", "rgb(0, 0, " + (d * 10) + ")");
})

在没有中断命令的情况下，我们无法在fill orange结束（5秒！）之前触发fadeOut。

这里可以使用的FIDDLE：）

D3.js：停止转换中断鼠标悬停？

3 个答案: