关于javascript：d3.js filter()不显示预期结果

d3.js filter() not displaying expected results

filter命令无法正常工作。我将如何重构代码以获取请求的输出？

在.filter((d,i) => condition)语法中，d是一个对象，其x(日期/时间字符串)和y(生成移位的数量为汽车)轴数值为该数据点，i是线图上该数据点的索引。为什么d.x != testdate#？注意：testdate1和testdate2
是与数据点中的两个日期/时间字符串精确匹配的日期时间字符串在对此进行故障排除时，我还尝试查看d.x的typeof但没有成功。

Test1 - 注释掉 - 测试2和3的反转，并且它有效(证明测试2和3中的条件不匹配，因为显示点的代码有效)
Test2 - Mon Jan 04 08:00数据点(速记语法)没有看到greendot类
Test3 - 在1月02日08:00数据点(传统语法，差异数据点)上没有看到reddot类
Test4 - 与上面类似，使用console.log
Test5 - 测试typeof - console.log什么都不显示，console.dir只显示文本字"object"
Test6 - console.log显示其中一个数据点是testdate1的完美匹配

jsFiddle for experimentaling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

clearconsole();
var chartWidth = 500;
var myCSV = [
{"shift":"1","date":"01/01/2016/08/00/00","car":"178","truck":"125","bike":"317","moto":"237"},
{"shift":"2","date":"01/01/2016/17/00/00","car":"125","truck":"189","bike":"125","moto":"273"},
{"shift":"3","date":"02/01/2016/08/00/00","car":"140","truck":"219","bike":"328","moto":"1252"},
{"shift":"4","date":"02/01/2016/17/00/00","car":"222","truck":"290","bike":"432","moto":"378"},
{"shift":"5","date":"03/01/2016/08/00/00","car":"200","truck":"250","bike":"420","moto":"319"},
{"shift":"6","date":"03/01/2016/17/00/00","car":"230","truck":"220","bike":"310","moto":"413"},
{"shift":"7","date":"04/01/2016/08/00/00","car":"155","truck":"177","bike":"377","moto":"180"},
{"shift":"8","date":"04/01/2016/17/00/00","car":"179","truck":"203","bike":"405","moto":"222"},
{"shift":"9","date":"05/01/2016/08/00/00","car":"208","truck":"185","bike":"360","moto":"195"},
{"shift":"10","date":"05/01/2016/17/00/00","car":"150","truck":"290","bike":"315","moto":"280"},
{"shift":"11","date":"06/01/2016/08/00/00","car":"200","truck":"220","bike":"350","moto":"205"},
{"shift":"12","date":"06/01/2016/17/00/00","car":"230","truck":"170","bike":"390","moto":"400"},
];
var testdate1 = 'Mon Jan 04 2016 08:00:00 GMT-0500 (Eastern Standard Time)';
var testdate2 = 'Sat Jan 02 2016 08:00:00 GMT-0500 (Eastern Standard Time)';
lc1 = dc.lineChart("#line1");

var dateFormat = d3.time.format("%d/%m/%Y/%H/%M/%S");
myCSV.forEach(function (d) {
d.date = dateFormat.parse(d.date);
});

myCSV.forEach(function (d) {
d['car'] = +d['car'];
});

//console.log(myCSV);

var facts = crossfilter(myCSV);
var dateDim = facts.dimension(function (d) {return d.date});

var carDim = facts.dimension(function (d) {return d['car']});
var dgCar = dateDim.group().reduceSum(function (d) {return d['car']});

var minDate = new Date ("2016-01-01T08:00:00.000Z");
var maxDate = new Date ("2016-01-06T17:00:00.000Z");

var maxY = d3.max(myCSV, function(d) {return d['car']});

lc1
.renderArea(false)
.width(chartWidth)
.height(250)
.dimension(dateDim)
.group(dgCar)
.defined(function(d) {if(d.y !==null) {return d.y;}})
.transitionDuration(1000)
.margins({top: 30, right: 20, bottom: 35, left: 60})
.yAxisLabel('Cars')
.renderHorizontalGridLines(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]));
lc1.yAxis().ticks(5);
lc1.xAxis().ticks(3);

lc1.on('renderlet', function(lc1) {
console.log('myCSV.length: '+myCSV.length);
var allDots1 = lc1.selectAll('circle.dot');
//allDots1.filter((d,i) => i != testdate1).classed('pinkdot',true);
allDots1.filter((d,i) => i === testdate1).classed('greendot',true);
allDots1.filter(function(d){ return d.x===testdate2 }).classed('reddot',true);
allDots1.filter(function(d){ if (d.x===testdate2) console.log('Found it') });
allDots1.filter(function(d){ var xyz = d.x; console.dir(typeof xyz) });
allDots1.filter((d, k) => console.log("

["+d.x+"]

["+testdate1+"]") );

});//END lc1.on(renderlet)

dc.renderAll();
dc.redrawAll();

function clearconsole(){
console.API;
if (typeof console._commandLineAPI !== 'undefined') {
console.API = console._commandLineAPI; //chrome
} else if (typeof console._inspectorCommandLineAPI !== 'undefined') {
console.API = console._inspectorCommandLineAPI; //Safari
} else if (typeof console.clear !== 'undefined') {
console.API = console;
}
console.API.clear();
}

1
2
3
4

svg{height:280px;width:500px;}
.greendot{stroke:green !important; fill:green !important; fill-opacity:1 !important;}
.reddot{stroke:red !important; fill:red !important; fill-opacity:1 !important;}
.pinkdot{stroke:pink; fill:pink; fill-opacity:1 !important;}

1
2
3
4
5
6

比较日期时，请使用getTime()方法，例如：

1
2
3
4

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

另外，你应该设置时区的偏移量，

1
2
3
4
5
6
7
8
9
10

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

演示

参考文献＃1：日期比较

参考＃2：Javascript的'+'一元运算符

参考编号3：D3 v3 timeFormat