javascript - d3 中带有 slider 的 map 数据示例

Question

我尝试为此 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有什么建议吗？

Answer 1

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

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