d3 中带有滑块的地图数据示例答案

【问题标题】：Map data example with slider in d3d3 中带有滑块的地图数据示例
【发布时间】：2016-01-19 00:48:28
【问题描述】：

我试图为这个example实现一个基本的滑块功能

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

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

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有什么建议吗？

【问题讨论】：

标签： javascript jquery d3.js

【解决方案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);

【讨论】：