Javascript 带有播放/暂停循环的HTML范围滑块

我是网络开发新手，我正在制作一个d3可视化软件。我需要一个范围滑块，它将在二维数组（表示不同的时间点）中循环，以更改几个SVG元素的颜色

据我所知，到目前为止，我所拥有的一切似乎功能完善。但是，我不知道如何将播放/暂停功能添加到HTML范围滑块以挽救我的生命。上一篇文章只收到使用d3笔刷元素作为滑块的建议。这是有道理的，但它似乎更复杂，我仍然无法理解如何用画笔完成播放/暂停功能

请参阅我的玩具示例的完整代码，如果您愿意，可以在下面或中嵌入。我猜jQuery有一种方法可以做到这一点——但人们希望尽可能减少依赖性，所以我需要一个基于普通javascript或d3的解决方案。谢谢大家!

var数据集=[
[1, 2],
[2, 3],
[3, 4],
[4, 5],
[5, 4]
];
var colorScale=d3.scale.linear（）
.domain（[0,2.5,5]）
.范围（[“红色”、“白色”、“蓝色”）；
//绘制SVG元素，然后绘制圆
var svg=d3。选择（“#圆”）
.append（“svg”）
.attr（“宽度”，200）
.attr（“高度”，900）
.append（'g'）
.attr（'id'，'foo'）；
append（'circle'）
艾特先生({
“cx”：45，
‘cy’：45岁，
“r”：15，
“id”：“circle1”
});
append（'circle'）
艾特先生({
“cx”：90，
‘cy’：45岁，
“r”：15，
“id”：“circle2”
});
//初始化每个圆中的颜色填充
d3.选择（“#圆圈1”）
.样式（“填充”，功能（d）{
返回colorScale（数据集[0][0]）；
})
.transition（）；
d3.选择（“#圆圈2”）
.样式（“填充”，功能（d）{
返回colorScale（数据集[0][1]）；
})
.transition（）；
//更新圆的填充以匹配新时间点的函数
函数更新（时间点）{
d3.选择（“#圆圈1”）
.transition（）.持续时间（500）
.样式（“填充”，功能（d）{
返回colorScale（数据集[时间点][0]）；
});
d3.选择（“#圆圈2”）
.transition（）.持续时间（500）
.样式（“填充”，功能（d）{
返回颜色比例（数据集[时间点][1]）；
});
};
//更改滑块时运行更新功能
d3.选择（'#RangeSlaider'）。打开（'input'，function（）{
更新（该值）；
});
html{
背景颜色：浅灰色；
}

开始
停止
调整后的小提琴：

您可以使用d3的属性运算符访问RangeSloider的最小值、最大值设置

请注意，这样设置RangeSloider上的值不会触发输入事件。有很多方法可以做到这一点，但是用当前值调用update函数也可以

var myTimer;
d3.select("#start").on("click", function() {
    clearInterval (myTimer);
    myTimer = setInterval (function() {
    var b= d3.select("#rangeSlider");
      var t = (+b.property("value") + 1) % (+b.property("max") + 1);
      if (t == 0) { t = +b.property("min"); }
      b.property("value", t);
      update (t);
    }, 1000);
});

d3.select("#stop").on("click", function() {
    clearInterval (myTimer);
});