Skip to content Skip to sidebar Skip to footer

D3.js Filter() Not Displaying Expected Results

The filter command is not working as I expected. How would I refactor the code to get the requested output? In the .filter((d,i) => condition) syntax, d is an object with the x

Solution 1:

When you compare dates, use getTime() method, eg.:

allDots1.filter(function(d){ 
    console.log(d.data.value, d.x, +d.x, testdate2, d.x===testdate2, +d.x===testdate2); 
    return +d.x===testdate2; // + is a shortcut for .getTime() 
  }).classed('reddot',true);

Additionally, you should set the timezone's offset,

var myCSV = [   
  {"shift":"1","date":"01/01/2016/08/00/00/+0500","car":"178","truck":"125","bike":"317","moto":"237"},
  {"shift":"2","date":"01/01/2016/17/00/00/+0500","car":"125","truck":"189","bike":"125","moto":"273"},
  {"shift":"3","date":"02/01/2016/08/00/00/-0500","car":"140","truck":"219","bike":"328","moto":"1252"},
  //...
];

//...

var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S/%Z");

Demo

Reference #1: Comparison of dates

Reference #2: Javascript's '+' unary operator

Reference #3: D3 v3 timeFormat

Solution 2:

testdate and testdate2 are still strings when you're doing the equality check. Try parsing them with vanilla new Date() or d3's date/time functions:

.filter(function(d){ return d.x >= new Date(testdate2); }).

Careful to check what time zone the JS Date format is coming back in - the values might not be equal, even when they're both coming back as valid JS dates, if one is in a different time zone.

Post a Comment for "D3.js Filter() Not Displaying Expected Results"