我想将d3.js日历定制为一种日期选择器"。除了日历的每一行之外,将三个fisrt字母命名为当天的名字,目的是在用户点击星期一时选择每个星期一。
我有两个问题:
首先,当我创建"天文本" (从mwhixh用户将选择一年中的每个特定日期)olny one" i"考虑到是最后一个。
其次,当我尝试选择每个特定日期时,我会得到所有特定日期的列表,但格式错误(d3.time格式,我想要yy-mm-dd格式)
以下是代码:
week_days = ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']
for (var i = 0; i < 7; i++) {
svg.append("text")
.attr("transform", "translate(-34," + cellSize * (i + 1) + ")")
.style("text-anchor", "end")
.attr("id",week_days[i])
.attr("dy", "-.25em")
.attr("style", "cursor:pointer;")
.on('click', function() {
if (d3.select(this).attr("class") !== "selected") {
d3.select(this).attr("class", "selected");
console.log("avant filtre i="+i);
console.log(week_days[i-1]);
svg.selectAll("rect")
.filter(function(d) {
switch(week_days[i-1]){
case "Dim": console.log(new Date(d, 0, 1)+" - "+ new Date(d + 1, 0, 1));
return d3.timeSunday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1));//.timeFormat("%Y-%m-%d")
break;
case "Lun": console.log(new Date(d, 0, 1)+" - "+ new Date(d + 1, 0, 1));
return d3.timeMonday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1));
break;
case "Mar": console.log(new Date(d, 0, 1)+" - "+ new Date(d + 1, 0, 1));
return d3.timeTuesday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1));
break;
case "Mer": console.log(new Date(d, 0, 1)+" - "+ new Date(d + 1, 0, 1));
return d3.timeWednesday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1));
break;
case "Jeu": console.log(new Date(d, 0, 1)+" - "+ new Date(d + 1, 0, 1));
return d3.timeThursday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1));
break;
case "Ven": console.log(new Date(d, 0, 1)+" - "+ new Date(d + 1, 0, 1));
return d3.timeFriday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1));
break;
case "Sam": console.log(d3.timeSaturday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1)));
return d3.timeSaturday.range(new Date(new Date().getFullYear(), 0, 1), new Date(new Date().getFullYear()+1, 0, 1));
break;
default: break;
}
})
.attr("fill", "red");
} else {
d3.select(this).attr("class", "");
svg.selectAll("rect")
.filter(function(d) {
switch(i-1){
case 0: return d3.timeSunday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1));
console.log(d3.timeSunday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1)));
break;
case 1: return d3.timeMonday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1));
console.log(d3.timeMonday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1)));
break;
case 2: return d3.timeTuesday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1));
console.log(d3.timeTuesday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1)));
break;
case 3: return d3.timeWednesday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1));
console.log(d3.timeWeddnesday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1)));
break;
case 4: return d3.timeThursday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1));
console.log(d3.timeThursday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1)));
break;
case 5: return d3.timeFriday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1));
console.log(d3.timeFriday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1)));
break;
case 6: return d3.timeSaturday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1));
console.log(d3.timeSaturday.range(new Date(d, 0, 1), new Date(d + 1, 0, 1)));
break;
default: break;
}
})
.attr("fill", "#aaa");
}
})
.text(function(d) {
return week_days[i];
});
}
谢谢!