Geek Answers Handbook

D3.js- How to format tick values ​​as quarters, not months

I have a data set in quarters. here is the array:

var dataGDP = [
{date:  "Q1-2008",  GDPreal:    "2.8"},
{date:  "Q2-2008",  GDPreal:    "0.6"},
{date:  "Q3-2008",  GDPreal:    "-2.1"},
{date:  "Q4-2008",  GDPreal:    "-4.3"},
{date:  "Q1-2009",  GDPreal:    "-6.8"},
{date:  "Q2-2009",  GDPreal:    "-6.3"},
{date:  "Q3-2009",  GDPreal:    "-5"}
];

How can I get these dates on my X axis, like 1st quarter of 2008, 2nd quarter of 2008, 3rd quarter of 2008? my X axis uses a time-based scale. I'm not sure there is a way to parse these dates as they now use d3.time.format. However, I can parse them if I use the months instead of 01/2008, 04/2008 ... using: parseDate = d3.time.format ("% m /% Y"). Parse;

Should I write my dates in the array as months and then write a function to convert months to quarters? or is there a way to store Q1..ect in an array, as it is now, and parse the dates?

+4
3

D3 ( , ). , , , , .

0

.

, 10 (x.getTime() - 10000), , 3/31/2015 4/1/2015, . .

    var xAxis = d3.svg.axis()
            .scale( x )
            .ticks( d3.time.months, 3 )
            .tickFormat( function ( x ) {
                             // get the milliseconds since Epoch for the date
                             var milli = (x.getTime() - 10000);

                             // calculate new date 10 seconds earlier. Could be one second, 
                             // but I like a little buffer for my neuroses
                             var vanilli = new Date(milli);

                             // calculate the month (0-11) based on the new date
                             var mon = vanilli.getMonth();
                             var yr = vanilli.getFullYear();

                             // return appropriate quarter for that month
                             if ( mon <= 2 ) {
                                 return  "Q1 " + yr;
                             } else if ( mon <= 5 ) {
                                 return  "Q2 " + yr;
                             } else if ( mon <= 8 ) {
                                 return  "Q3 " + yr;
                             } else {
                                 return "Q4 " + yr;
                             }
                         } )
            .orient( "bottom" );
+3

, , d3 .

Google

0

More articles:


All Articles