Question

我有一段代码在mouseover上移动一行，如下所示：

some_svg
    .on("mouseover", function() {
        my_line.transition().attr("transform", function(d) {
            return "translate(" + [d.new_x, d.new_y] + ")";
        });
    })

然而，让我们说转换需要一整秒才能完成（我相信这是d3的默认值），如果我将鼠标移到some_svg上然后在一秒之前快速移出鼠标，那么就行了我将鼠标移出后立即停止，并且部分完成转换。换句话说，该行将位于旧位置和新位置之间的某个位置。

无论我是否将鼠标移出（只要我不将其移回另一个some_svg），如何确保转换始终完成？

Answer 1

默认持续时间（如果未设置）为250毫秒。

不中断mouseover转换的简单方法是不设置更改转换的mouseout行为。只要您不移动到具有干扰正在进行的转换的mouseover / mousemove事件处理程序的元素，转换就会完成。话虽这么说，我无法理解或重现你的陈述（“当我将鼠标移出时，线条会停止，并且部分将完成过渡”。）

这很容易确认：将鼠标悬停在下面的矩形上。无论你将鼠标移出鼠标，它都会完成它的过渡。

d3.select("rect").on("mouseover", function(){
	d3.select(this).transition().duration(5000).attr("transform", "translate(350, 0)");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="400" height="200">
	<rect x="0" y="50" width="40" height="20" fill="teal"></rect>
</svg>

如何在mouseout上不中断鼠标悬停d3过渡？

1 个答案: