我想把一条竖线向水平方向移动,并支持“暂停”和“继续”移动。当我点击“暂停”按钮时,线会停止移动;当点击“继续”时,线会继续移动。
现在,我使用“transition”函数来实现从左到右的水平过渡,但不知道如何“暂停”和“继续”。
这是我的演示:
现在,我使用“transition”函数来实现从左到右的水平过渡,但不知道如何“暂停”和“继续”。
这是我的演示:
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="500" height="500">
<line x1="100" y1="0" x2="100" y2="100" stroke="black"/>
</svg>
</body>
<script>
d3.select("line").transition()
.ease(d3.easeLinear)
.duration(2000)
.attr("x1",200)
.attr("x2",200);
</script>
</html>
是否有可能“暂停”过渡,或者如何在不使用“transition”函数的情况下实现此目标?