Javascript d3：如何在水平方向上移动垂直线并支撑'；暂停'；和'；继续'；移动_Javascript_D3.js

Javascript d3：如何在水平方向上移动垂直线并支撑'；暂停'；和'；继续'；移动

javascript d3.js

Javascript d3：如何在水平方向上移动垂直线并支撑'；暂停'；和'；继续'；移动,javascript,d3.js,Javascript,D3.js,我想在水平方向上移动垂直线，并支持“暂停”和“继续”移动。当我点击“暂停”按钮时，线路停止移动；当“继续”时，线继续移动现在，我使用“transition”函数实现从左到右的水平转换，但不知道如何“暂停”和“继续” 这是我的演示： <html> <head> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <svg

我想在水平方向上移动垂直线，并支持“暂停”和“继续”移动。当我点击“暂停”按钮时，线路停止移动；当“继续”时，线继续移动

现在，我使用“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>


d3.选择（“行”）.transition（）
.ease（d3.easeLinear）
.期限（2000年）
.attr（“x1”，200）
.attr（“x2”，200）；

是否可以“暂停”过渡，或者如何使用其他方法来实现此目标而不使用“过渡”功能？

以下是一种方法：


暂停
继续
//停顿
d3.选择（'button.pause'）。打开（'click'，函数（）{
d3.选择（“行”）.中断（）；
});
d3.选择（'button.continue'）。在（'click'，function（）上{
d3.选择（“行”）.transition（）
.ease（d3.easeLinear）
.持续时间（10000）
.attr（“x1”，800）
.attr（“x2”，800）；
}).发送（“点击”）；

是的，这很有帮助。你能解释一下“分派”的功能吗？我尝试了一下代码，发现如果没有“分派”，它一开始就不会启动。所以调度就是这样。但我仍然不知道dispatch在文档中搜索后做了什么。只是在页面加载时触发“继续”按钮的单击事件。如果您注意到，我在“单击”事件中移动了您的所有转换代码。