Question

这是我的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');

 });

现在的问题是，当我将鼠标悬停在一个圆圈上并立即将其悬停在鼠标悬停之外时，在鼠标悬停时启动的过渡不会立即停止。它完成了它的过渡，并且尽管是鼠标输出，但半径的大小却增加了应该调用事件。无论过渡到底应该停止。请让我知道问题及其解决方案。

Answer 1

您只需在两种情况下都使用过渡。来自the documentation：

如果在给定元素上运行较新的转换，则它会隐式取消任何较旧的转换，包括已安排但尚未运行的任何转换。这允许新的转换（例如响应新用户事件的转换）取代较旧的转换，即使这些较旧的转换已暂存或具有交错延迟。

所以你的代码必须是这样的。

.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');
});

演示here。

Answer 2

如果你的d3版本足够成熟（3.3+），他们似乎已经添加了选择。interrupt

所以你可以试试：

.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 （半径）死亡的仅过渡，请参阅使用中断的fiddle。

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

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

2 个答案: