我尝试为此 example 实现基本的 slider 功能
var slider = d3.slider()
.axis(false).min(minDate).max(maxDate).step(secondsInDay)
.on("slide", function(evt, value) {
temp = moment(value,"x").utc().format("MM");
console.log(temp);
//tempVal = moment(temp).unix()*1000;
dataChoro = countries.properties.filter(function(d){
return d.properties[attributeArray[temp]]
});
});
d3.select('#slider3').call(slider);
但我看不懂国家
。我必须更改什么才能使其运行?我尝试使用此示例的播放功能,但我想使用 slider 来触发事件,而不是按钮播放
function animateMap() {
var timer; // create timer object
d3.select('#play')
.on('click', function() { // when user clicks the play button
if(playing == false) { // if the map is currently playing
timer = setInterval(function(){ // set a JS interval
if(currentAttribute < attributeArray.length-1) {
currentAttribute +=1; // increment the current attribute counter
} else {
currentAttribute = 0; // or reset it to zero
}
sequenceMap(); // update the representation of the map
d3.select('#clock').html(attributeArray[currentAttribute]); // update the clock
}, 2000);
d3.select(this).html('stop'); // change the button label to stop
playing = true; // change the status of the animation
} else { // else if is currently playing
clearInterval(timer); // stop the animation by clearing the interval
d3.select(this).html('play'); // change the button label to play
playing = false; // change the status again
}
});
}
Gist有什么建议吗?
最佳答案
当您想使用与时钟相同的代码时,可以尝试这个
var slider = d3.slider()
.axis(false).min(minDate).max(maxDate).step(secondsInDay)
.on("slide", function(evt, value) {
temp = moment(value,"x").utc().format("MM");
if(currentAttribute < attributeArray.length-1) {
console.log(currentAttribute);
currentAttribute = temp-1; // increment the current attribute counter
} else {
currentAttribute = 0; // or reset it to zero
}
sequenceMap(); // update the representation of the map
d3.select('#clock').html(attributeArray[currentAttribute]); // update the clock
});
d3.select('#slider3').call(slider);
关于javascript - d3 中带有 slider 的 map 数据示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34866740/