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 選擇並向下推年份標簽

// 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/

我遇到了 Fiddle 的間歇性問題，當你運行時沒有按下標簽，但這不會發生在 fiddle 之外。 因此，如果您沒有看到軸標簽向下移動，只需將代碼復制到本地 HTML 文件中即可。

---

Answer 2

謝謝@potatopeelings ！

在 2021 年，我替換了：

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

和：

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