用d3.slider显示一天

时间:2016-01-04 13:56:23

标签: javascript d3.js

我有我的地图,我会随着时间的推移显示一些事件。到目前为止,我使用了像这样过滤的数据

dpG = d3.time.format("%d.%m.%Y").parse;
dpS = d3.time.format("%Y-%m-%d").parse;
var minDate = dpG("01.01.2015");
var maxDate = dpG("31.12.2015");
var secondsInDay = 60 * 60 * 24;
d3.select('#slider3').call(d3.slider()
  .axis(true).min(minDate).max(maxDate)
  .on("slide", function(evt, value) {
    newDataG = site_dataG.features.filter(function(d){
var date = (dpG(d.properties.date).getTime() === new Date(value).getTime());
      // console.log(date)
      //console.log(new Date(value));

      console.log(dpG(d.properties.date));
      return(date);
    });
    // newDataS = site_dataS.features.filter(function(d){
    //   return dpS(d.properties.Date) < new Date(value);
    // });
    // console.log(newDataG);
        // console.log("New set size ", newDataG.length);

    displaySitesG(newDataG);
    // displaySitesS(newDataS);
  })
);

但是现在我只尝试过滤一天而不是所有的日子直到new Date(value) 所以我试过这样的事情

newDataG = site_dataG.features.filter(function(d){
  var date = dpG(d.properties.date) == new Date(value);
  // console.log(date)
  //console.log(new Date(value));
  return(date);
});

结果证明根本不起作用。

这样的事情会同时显示所有数据。

var date = new Date(value);

如果您需要查看

,其他文件为github repo

EDIT2:

date1 = Math.round(dpG(d.properties.date).getTime() / (1000*60*60*24));
date2 = Math.round(new Date(value).getTime() / (1000*60*60*24));
console.log(date1);
console.log(date2)

给了我这个 log1

2 个答案:

答案 0 :(得分:0)

直接检查相等性不适用于date个对象:

var d1 = new Date();
var d2 = new Date(d1);
console.log(d1 == d2);   // false!

相反,如果您想使用date.getTime()==!====运算符,则需要使用!==运算符:

var d1 = new Date();
var d2 = new Date(d1);
d1.getTime() === d2.getTime(); // true

所以,请尝试这样做:( 编辑以修正错误

var date = (dpG(d.properties.date).getTime() === new Date(value).getTime());

请注意,这仅在dpG(thing)返回Date对象时才有效。

答案 1 :(得分:0)

我使用moment.js来使UnixTimeStamp成为偶数

这是帮助

的代码段
d3.select('#slider3').call(d3.slider()
.axis(true).min(minDate).max(maxDate)
.on("slide", function(evt, value) {
  sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");
  newDataS = site_dataS.features.filter(function(d){

    //sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");
    dataDate = d.properties.Date;
    //dataDateStampS = moment(dataDate).unix();

    if (dataDate == sliderDate) {
      return dpS(dataDate);
    }
  });
  displaySitesS(newDataS);
})
);