我想在水平方向上移动一条垂直线，并支持暂停＆＃39;并且＆＃39;继续＆＃39;运动。当我点击暂停＆＃39;按钮，线停止移动;当＆＃39;继续＆＃39;时，线继续移动。
现在，我使用＆＃39; transition＆＃39;用于实现从左到右的水平过渡，但不知道如何暂停＆＃39;并且＆＃39;继续＆＃39;。
这是我的演示：
<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>
是否可以暂停＆＃39;过渡或如何使用其他方式实现这一目标，而不使用过渡＆＃39;功能
答案 0 :(得分：1)
以下是一种方法：
<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是您应该寻找的。我已将其用于暂停按钮，并且继续按钮单击刚刚重新启用相同的转换。要开始转换，请单击“继续”按钮。
这只是一个基本版本，但我希望逻辑足够清晰。希望这会有所帮助。