Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript D3.js Styling and Scaling with Data Using Time Scales in D3.js

Peter Makowski
Peter Makowski
11,244 Points
Posted by Peter Makowski
Peter Makowski
11,244 Points

Year Quarters/halves with D3.js

Is there a way to use quarters/halves (H1 2005, H2 2005 etc.) with D3.js except from creating custom Ordinal Scales?

https://github.com/mbostock/d3/wiki/Ordinal-Scales#ordinal

1 Answer

Pablo Rocha
Pablo Rocha
10,142 Points
Pablo Rocha
Pablo Rocha
10,142 Points

D3.js does not natively support that feature, but you can use the tickFormat method to achieve the effect. Check this JSFiddle for a complete example.

var quarter = function(date, i){
    var date2 = new Date();
    date2.setMonth(date.getMonth() - 1);
    q = Math.ceil(( date2.getMonth()) / 3 );
    return "Q" + q;
}

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(quarter);