d3 make a individual bar Chart of week and Hours between and set the Item in the right Position

I have got the Solutions i have changed the Structure and have make each Week 40 Hours in them e.g.

n(Weeks) * 40;

so D3 know which Point the Bar must go in the X-Axis i changed the Week array into this Structure:

0: {isAWeek: 1, weekCalender: "45", hour: 0}
1: {isAWeek: 0, hour: 1}
2: {isAWeek: 0, hour: 2}
3: {isAWeek: 0, hour: 3}
4: {isAWeek: 0, hour: 4}
5: {isAWeek: 0, hour: 5}
6: {isAWeek: 0, hour: 6}
7: {isAWeek: 0, hour: 7}
8: {isAWeek: 0, hour: 8}
9: {isAWeek: 0, hour: 9}
10: {isAWeek: 0, hour: 10}
11: {isAWeek: 0, hour: 11}
12: {isAWeek: 0, hour: 12}
13: {isAWeek: 0, hour: 13}
14: {isAWeek: 0, hour: 14}
15: {isAWeek: 0, hour: 15}
16: {isAWeek: 0, hour: 16}
17: {isAWeek: 0, hour: 17}
18: {isAWeek: 0, hour: 18}
19: {isAWeek: 0, hour: 19}
20: {isAWeek: 0, hour: 20}
21: {isAWeek: 0, hour: 21}
22: {isAWeek: 0, hour: 22}
23: {isAWeek: 0, hour: 23}
24: {isAWeek: 0, hour: 24}
25: {isAWeek: 0, hour: 25}
26: {isAWeek: 0, hour: 26}
27: {isAWeek: 0, hour: 27}
28: {isAWeek: 0, hour: 28}
29: {isAWeek: 0, hour: 29}
30: {isAWeek: 0, hour: 30}
31: {isAWeek: 0, hour: 31}
32: {isAWeek: 0, hour: 32}
33: {isAWeek: 0, hour: 33}
34: {isAWeek: 0, hour: 34}
35: {isAWeek: 0, hour: 35}
36: {isAWeek: 0, hour: 36}
37: {isAWeek: 0, hour: 37}
38: {isAWeek: 0, hour: 38}
39: {isAWeek: 0, hour: 39}
40: {isAWeek: 1, weekCalender: "46", hour: 40}
41: {isAWeek: 0, hour: 41}
42: {isAWeek: 0, hour: 42}
....

with this Structure i can mark Which Hour is a new Week and can define in the X-Scale when he hit this Data with isAWeek == 1 he display the Week and continue the Hours Point:

//append X Scale
svg.append("g")
    .call(
        d3.axisTop(xScale).tickFormat( function(w, i) {
            if( weekdays[i].isAWeek == 1 ) {
                return weekdays[i].weekCalender;
            } else {
                return "";
            }  
        })
    );

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top