HTML 带 Play/Pause 循环的范围滑块

Question

我是 Web 开发的新手，运行我正在制作一个 d3 可视化效果。我需要一个范围滑块，它将循环遍历二维数组（代表不同的时间点）以更改多个 SVG 元素的颜色。

据我所知，到目前为止，我所拥有的似乎功能完美。但是，我不知道如何将 play/pause 功能添加到 HTML 范围滑块来挽救我的生命。之前 almost this exact question 的 post 只收到了使用 d3 画笔元素作为滑块的建议。这是有道理的，但是看起来更复杂，我仍然无法弄清楚play/pause功能如何用刷子完成。

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

var dataSet = [
  [1, 2],
  [2, 3],
  [3, 4],
  [4, 5],
  [5, 4]
];

var colorScale = d3.scale.linear()
  .domain([0, 2.5, 5])
  .range(["red", "white", "blue"]);

//Draw the SVG element, then the circles
var svg = d3.select('#circles')
  .append("svg")
  .attr("width", 200)
  .attr("height", 900)
  .append('g')
  .attr('id', 'foo');

svg.append('circle')
  .attr({
    "cx": 45,
    'cy': 45,
    'r': 15,
    'id': 'circle1'
  });

svg.append('circle')
  .attr({
    "cx": 90,
    'cy': 45,
    'r': 15,
    'id': 'circle2'
  });

//Initialize the color fill in each circle
d3.select('#circle1')
  .style('fill', function(d) {
    return colorScale(dataSet[0][0]);
  })
  .transition();

d3.select('#circle2')
  .style('fill', function(d) {
    return colorScale(dataSet[0][1]);
  })
  .transition();

//The function which updates the fill of the circles to match a new time point    
function update(timePoint) {
  d3.select('#circle1')
    .transition().duration(500)
    .style('fill', function(d) {
      return colorScale(dataSet[timePoint][0]);
    });
  d3.select('#circle2')
    .transition().duration(500)
    .style('fill', function(d) {
      return colorScale(dataSet[timePoint][1]);
    });
};

//Run the update function when the slider is changed
d3.select('#rangeSlider').on('input', function() {
  update(this.value);
});

html {
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <div id="slider">
    <input type='range' min='0' max='4' step='1' value='0' id='rangeSlider' />
    <button type="button" id="start">start</button>
    <button type="button" id="stop">stop</button>
  </div>

  <div id="circles">
  </div>
</body>

Answer 1

调整后fiddle：https://jsfiddle.net/bfbun6cc/4/

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);
});

您可以使用 d3 的属性运算符来访问 rangeslider

的最小值、最大值和值设置

请注意，像这样在范围滑块上设置值不会触发输入事件。有很多方法可以做到这一点，但只需使用当前值调用更新函数也可以。

HTML 带 Play/Pause 循环的范围滑块

HTML Range Slider with Play/Pause Loop

javascript

html

d3.js

rangeslider