d3.js日历的日期格式

时间:2017-08-10 14:25:18

标签: javascript d3.js calendar

我想将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];
            });
    }

谢谢!

0 个答案:

没有答案