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

我是网络开发的新手，并且遇到了我正在制作的d3可视化界面。我需要一个范围滑块，它将通过一个二维数组（代表不同的时间点）来改变几个SVG元素的颜色。带有播放/暂停循环的HTML范围滑块

据我所知，迄今为止我所看到的功能都很完美。但是，我无法弄清楚如何将播放/暂停功能添加到HTML范围滑块来保存我的生活。以前的文章almost this exact question只收到使用d3笔刷元素作为滑块的建议。这是有道理的，但它看起来更复杂，我仍然无法弄清楚如何使用画笔完成播放/暂停功能。

如果您愿意，请参阅下面我的玩具示例的完整代码，或者在this fiddle。我猜测有一种方法可以用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 \t \t \t 
 
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>

来源

2016-01-21 Tanner Koomar

http://bl.ocks.org/CodeXmonk/6187523 – zer00ne

调整小提琴：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

注意的最小值，最大值，值的设置，设置的值在像这样的rangeslider不会触发输入事件。有办法做到这一点，但只是用当前值调用更新函数也可以。

来源

2016-01-21 22:27:59 mgraham

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

回答

相关问题