帶有播放/暫停循環的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範圍滑塊

回答

相關問題