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

Question

将 c3 js 库用于图表 (c3js.org)。我正在尝试实现与此图表类似的效果（即，在 Q1、Q2、Q3、Q4 之后的单独一行中添加年份标签 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 select 并将年份标签向下推一点

// 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 select 或隐藏/显示您不想要的刻度线）

#chart .tick line {
    display:none;
}

Fiddle - http://jsfiddle.net/rg082b19/

我在 Fiddle 时遇到间歇性问题，当您运行时没有按下标签，但在 fiddle 之外不会发生这种情况。因此，如果您没有看到轴标签向下移动，只需将代码复制到本地 HTML 文件即可。

Answer 2

谢谢！

2021 年，我替换为：

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

与：

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

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

c3 js: How can I group by Year on the X-axis labels?

javascript

charts

labels

c3