帶有播放/暫停循環的HTML范圍滑塊

Question

我是網絡開發的新手，並且遇到了我正在制作的d3可視化牆。 我需要一個范圍滑塊，它將循環通過一個二維數組（代表不同的時間點）來改變幾個SVG元素的顏色。

據我所知，到目前為止我所擁有的功能似乎完全正常。 但是，我無法弄清楚如何在HTML范圍滑塊中添加播放/暫停功能以挽救我的生命。 幾乎這個問題的上一篇文章只收到了使用d3畫筆元素作為滑塊的建議。 這是有道理的，但它似乎更復雜，我仍然無法弄清楚如何使用畫筆完成播放/暫停功能。

如果您願意，請查看下面嵌入的玩具示例的完整代碼，或者在此小提琴中。 我猜有一種方法可以用jQuery做到這一點 - 但是希望盡可能地減少依賴關系，所以我需要一個基於vanilla 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

調整小提琴： 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的屬性運算符來訪問rangelider的最小值，最大值設置

請注意，像這樣設置rangelider上的值不會觸發輸入事件。 有這樣做的方法，但只使用當前值調用更新函數也可以。

帶有播放/暫停循環的HTML范圍滑塊

問題描述

1 個解決方案

解決方案1
4 已采納 2016-01-21 22:27:59

帶有播放/暫停循環的HTML范圍滑塊

問題描述

1 個解決方案

解決方案1 4 已采納 2016-01-21 22:27:59

解決方案1
4 已采納 2016-01-21 22:27:59