Javascript d3中带滑块的地图数据示例

我试着实现一个基本的滑块函数

但是我看不懂国家。要使其运行，我必须更改什么？我尝试使用本例中的播放功能，但我不想使用按钮播放，而是想使用滑块来触发事件

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

函数animateMap（）{
var timer；//创建计时器对象
d3.选择（“#播放”）
.on（'click'，function（）{//当用户单击播放按钮时
if（playing==false）{//如果地图当前正在播放
timer=setInterval（函数（）{//设置JS间隔
如果（currentAttribute

---

有什么提示吗？

当你想使用相同的时钟代码时，你可以试试这个

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

var slider=d3.slider（）
.axis（false）.最小值（minDate）.最大值（maxDate）.步长（SecondsSinDay）
.开启（“滑动”，功能（evt，值）{
温度=力矩（值，“x”）.utc（）.格式（“MM”）；
如果（currentAttribute

当您想使用与时钟相同的代码时，可以尝试以下方法

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

var slider=d3.slider（）
.axis（false）.最小值（minDate）.最大值（maxDate）.步长（SecondsSinDay）
.开启（“滑动”，功能（evt，值）{
温度=力矩（值，“x”）.utc（）.格式（“MM”）；
如果（currentAttribute