我想在水平方向移动一条竖线，支持'pause'和'continue'移动。当我点击“暂停”按钮时，线路停止移动；当“continue”时，线继续移动。
现在，我使用'transition'函数实现了从左到右的水平过渡，但不知道如何'pause'和'continue'。
这是我的演示:
<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>
是否可以“暂停”过渡或如何在不使用“过渡”功能的情况下使用其他方式实现此目标？
最佳答案
这是一种方法:
<html>
<head>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div class="control-buttons">
<button class="pause">
Pause
</button>
<button class="continue">
Continue
</button>
</div>
<svg width="1000" height="500">
<line x1="100" y1="0" x2="100" y2="100" stroke="black"/>
</svg>
</body>
<script>
// pause
d3.select('button.pause').on('click', function() {
d3.select("line").interrupt();
});
d3.select('button.continue').on('click', function() {
d3.select("line").transition()
.ease(d3.easeLinear)
.duration(10000)
.attr("x1",800)
.attr("x2",800);
}).dispatch('click');
</script>
</html>d3-transition-interrupt是你应该寻找的。我已经将它用于暂停 按钮和继续 按钮，点击只是重新启用了相同的转换。要开始转换，请点击继续按钮。
这只是一个基本版本，但我希望逻辑足够清晰。希望这会有所帮助。
关于javascript - d3 : how to move a vertical line in horizontal direction and support 'pause' and 'continue' movement，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50605579/