I'm struggling to create a line chart that has two X axes and subgroupings for the year. So for example if I have 4 quarters, (Q3,Q4,Q1,Q2) and Q3,Q4 belong to the year 2014 while Q1,Q2 belong to the year 2015 i would be able to depict this on the second X axis. I have an example of this in the imgur link posted below, and a somewhat similar example that uses months instead of quarters. Does anyone have any insight or examples as to how I can accomplish this?
var xAxis1 = d3.svg.axis()
.scale(x)
//.ticks(d3.time.months)
.tickFormat(monthformat)
.tickSize(5,0)
.orient("bottom");
var xAxis2 = d3.svg.axis()
.scale(x)
.ticks(d3.time.years, 1)
.tickFormat(yearformat)
.tickSize(5,0)
.orient("bottom");
How about this? JSFiddle
var quarter = function(date, i){
if(i > 0){
var date2 = new Date();
date2.setMonth(date.getMonth() - 1);
q = Math.ceil(( date2.getMonth()) / 3 );
return "Q" + q;
}
}
var xAxis3 = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(d3.time.months, 3)
.tickSize(5, 0)
.tickFormat(quarter);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height + 25) + ")")
.call(xAxis3);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.