c3js数据标签的位置

Question

有没有可能的方法来更改c3条形图中数据上方的标签位置？在官方文档中,很好地解释了如何通过操纵y和x整数来改变x和y测量轴上标签的位置,但我没有找到任何数据标签.

我试图指向它与普通的d3上c3是基础,但console.log返回我空:

d3.selectAll(".c3-texts .c3-text").each(function () {
    var yOrigin = d3.select(this).attr('y');
    console.log(yOrigin);
})

因为它在图形生成之前触发.您可以在这里查看和编辑我正在处理的内容:http: //jsfiddle.net/e60o24d0/

Answer 1

有两种方法可以影响这些标签:

一个.transform在CSS中使用:

.c3-texts .c3-text text {
  transform: translate(-22px, 0);
}

湾 在onrendered回调中使用D3选择它们:

var chart = c3.generate({
    onrendered: () => {
        d3.selectAll('.c3-text').each((v) => {
            console.dir(v);
        });
    },
    data: {
        columns: [
            ['data1', 30, -200, -100, 400, 150, 250],
            ['data2', -50, 150, -150, 150, -50, -150],
            ['data3', -100, 100, -40, 100, -150, -50]
        ],
        groups: [
            ['data1', 'data2']
        ],
        type: 'bar',
        labels: true
    },
    grid: {
        y: {
            lines: [{value: 0}]
        }
    }
});

这比使用setTimeout更好,因为您无需猜测在使用D3选择标签之前渲染标签需要多长时间.