10

我正在使用 D3 的进入/退出选择，我也想在鼠标悬停事件上添加一个过渡。

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

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

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

我如何才能在所有其他转换完成后才添加鼠标悬停事件处理程序，以停止字母冻结？

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

4

3 回答 3

8

你可以给transition分配一个名字，那么这个transition只会被同名的新transition打断。

text
.on('mouseover', function(d) { 
  d3.select(this).transition("fillColor").duration(100).style('fill', 'yellow');
});
于 2015-04-25T13:03:44.320 回答
6

我赞成并同意@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 直到fadeOut结束（5 秒！）。

这是你可以玩的FIDDLE :)

于 2016-10-18T23:34:01.443 回答
3

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

例如：

<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。但渴望听到更清洁的解决方案。

于 2014-05-18T03:36:49.577 回答