如何取消d3.js中的鼠标悬停转换

How to cancel the mouseover transition in d3.js

本文关键字：鼠标 悬停 转换 js d3 何取消 取消      更新时间：2023-09-26

这是我的HTML 的结构

svg
   g id=invisibleG
     g
       circle
     g
       circle
     g
       circle

所以我想要这样的东西悬停在任何一个特定的圆圈

svg
       g id=invisibleG
         g
           circle --> radius is increased on hover.....decreased on hoverout
           text
         g
           circle
         g
           circle

这是代码

 .on("mouseover",function(){
     var r=d3.select(this).attr("r");
     d3.select(this).style('fill','tan')
                    .style('fill-opacity', '1')
                    .transition()
                    .duration(1000)
                    .attr("r",50);
     d3.select(this).attr("stroke","blue")
                    .attr("stroke-width",4);
 })
 .on("mouseout",function(){
     var r=d3.select(this).attr("prevRadius");
     d3.select(this).attr("r",r)
                    .attr("stroke-width",0)
                    .style('fill-opacity','0');
 });

现在的问题是，当我将鼠标悬停在一个圆圈上并立即将其悬停出来时，鼠标悬停中开始的转换不会立即停止。它完成了它的转换，并且半径的大小增加了，尽管事实上应该调用mouseout事件。无论过渡发生了什么，都应该停止。请让我知道这个问题及其解决方案。

您只需要在这两种情况下都使用转换。来自文件：

如果一个较新的转换在给定的元素上运行，它会隐式取消任何较旧的转换，包括任何已计划但尚未运行的转换。这允许新的转换，例如响应新用户事件的转换，取代旧的转换，即使这些旧的转换是分段的或具有交错的延迟。

所以你的代码应该是这样的。

.on("mouseover", function() {
    this.prevRadius = d3.select(this).attr("r");
    d3.select(this)
        .style('fill','tan')
        .style('fill-opacity', '1')
        .transition()
        .duration(1000)
        .attr("r",50)
    d3.select(this)
        .attr("stroke","blue")
        .attr("stroke-width",4);
}).on("mouseout", function() {
    d3.select(this)
        .transition()
        .attr("r", this.prevRadius)
        .attr("stroke-width",0)
        .style('fill-opacity','0');
});

在这里演示。

如果你的d3版本足够成熟（3.3+），他们似乎增加了选择中断

所以你也许可以试试：

.on("mouseout",function(){
    d3.select(this).interrupt();
    // if interrupt isn't supported in your version use below
    //d3.select(this).transition().duration(0);
})

否则，同一选择上的较新转换将取消旧的活动转换。因此，您可以在mouseout上运行一个新的转换，再次转换到重置值。如果只想冻结转换，只需运行一个虚拟转换来取消旧的转换。

进一步了解

如果您的目标是停止r（半径）死在其轨迹中的仅过渡，请参阅使用中断的fidd。

如果您的目标是重置r值或鼠标悬停期间所做的非转换更改，请参阅fidd

相关文章：