d3.js conditional tick formatting - weekdays

时间:2015-05-24 20:28:11

标签: d3.js formatting conditional-statements

So I have a problem I am using this code from bl.ocks.org, I have modified it a bit so far. Now I am stuck with this problem: I want to format the ticks such that every Sunday appears read. I thought this little piece of code below should do the trick for me, but apparently it does not. I really believe it is a problem of me understanding, the call back function properly. So I would love to understand why if I call weekdays which works within the callback function, is not called by this little piece of code? Which I have put after selectAll("text") in the big chunk of code below.

I would be very grateful if someone could help me out!

Thank you!

This is where I thought formatting should work in my code:

var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(31)       
         .tickFormat(d3.time.format("%d-%b")) // puts date on axis in 

var timeaxis = svg.append("g")          // Add the X Axis

        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)

        .selectAll("text") //selects axis labels
         .style("color", (data, function(d) { return weekdays;
        if (weekdays == 0) {   //red if 0 (= Sunday)
            return "red";
        } else {
            return "black";
        }
    }));

        .attr("dx", "-.8em")
        .attr("dy", ".35em")
        .attr("transform", "translate(0,15) rotate(-70)")

This is how I read in the data:

// Get the data, works!
d3.csv("monthCPU.csv", function(error, data) {
    data.forEach(function(d) {

        d.date = parseDate(d.date);
        var weekday =   d.date.getDay();   
        d.CPUs = +d.CPUs;
        d.Memory = +d.Memory;
    });

This is the dummy data I am using in a CSV file called monthCPU.csv .

date,CPUs,Memory
2012-1-1,13,70
2012-1-2,50,13
2012-1-3,80,13
2012-1-4,5,13
2012-1-5,64,100
2012-1-6,13,13
2012-1-7,64,50
2012-1-8,30,10
2012-1-9,30,10
2012-1-10,13,13
2012-1-11,13,13
2012-1-12,13,13
2012-1-13,13,13
2012-1-14,13,13
2012-1-15,13,13
2012-1-16,13,13
2012-1-17,13,13
2012-1-18,13,33
2012-1-19,60,40
2012-1-20,1,11
2012-1-21,12,12
2012-1-22,13,13
2012-1-23,13,13
2012-1-24,1,11
2012-1-25,12,12
2012-1-26,13,13
2012-1-27,13,13
2012-1-28,1,11
2012-1-29,12,12
2012-1-30,13,13
2012-1-31,13,13
2012-1-30,13,13
2012-1-31,13,13

0 个答案:

没有答案