d3js X轴数据（按季度，按年份分组）

Question

我正在努力创建一个折线图，该折线图具有该年的两个X轴和子分组。 因此，例如，如果我有4个季度，（Q3，Q4，Q1，Q2）和Q3，Q4属于2014年，而Q1，Q2属于2015年，我可以在第二个X轴上进行描述。 我在下面发布的imgur链接中有一个示例，还有一个类似的示例，它使用月份而不是季度。 是否有人对我如何实现此目标有任何见解或示例？

http://imgur.com/KXjXbxc

http://jsfiddle.net/bhyvn5hv/

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");

Answer 1

这个怎么样？ 的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);