c3 js：我如何按年份在X轴标签上分组？

Question

使用c3 js库获取图表（c3js.org）。我试图获得与此图表类似的内容（即，在第一季度，第二季度，第三季度，第四季度之后的2011年，2012年和2013年分别添加年份标签）

var chart = c3.generate({
data: {
    x: 'x',
    columns: [
        ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2014-01-04', '2014-01-05', '2014-01-06'],
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 130, 340, 200, 500, 250, 350]
    ]
},
axis: {
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d'
        }
    }
}
});

以年 - 月 - 日格式显示每个标签中带有年份的x轴。我想在标签的第一行显示月份和日期，在下一行显示年份（不重复）。有点像：

format: function(){
     var label = '%m-%d';
     if(year!written)
           label +='%Y';
     return label;
}

Answer 1

您可以使用刻度线格式来编写标签

...
tick: {
    culling: false,
    count: (x.length - 1) * 2 - 1,
    format: function (d) {
        // show the year in place of Jul
        if (d.getMonth() === 6)
            return d.getFullYear();
        // ignore other non quarter months
        else if ([1, 4, 7, 10].indexOf(d.getMonth()) === -1)
            return '';
        // quarter months
        else
            return 'Q' + parseInt(d.getMonth() / 3 + 1);
    }
}
...

其中x是日期标签数组

然后使用d3选择并推迟年份标签

// push the years down
d3.selectAll('#chart .tick text tspan')[0].forEach(function (d) {
    var tspan = d3.select(d);
    if (!isNaN(Number(tspan.text())))
        tspan.attr('dy', '2em')
    else
        tspan.attr('dy', '0.5em')
})

其中chart是图表容器的ID

最后隐藏所有刻度线（或者你可以使用CSS nth-of-type选择器隐藏/显示你不想要的那些）

#chart .tick line {
    display:none;
}

小提琴 - http://jsfiddle.net/rg082b19/

我有小麻的间歇性问题，当你跑步时没有按下标签，但这并不是在小提琴之外发生的。因此，如果您没有看到轴标签向下移动，只需将代码复制到本地HTML文件中即可。

Answer 2

谢谢@potatopeelings！

在 2021 年，我替换了：

d3.selectAll('#chart02 .tick text tspan')[0]

与：

d3.selectAll('#chart02 .tick text tspan')._groups[0]