javascript - posición c3js de las etiquetas de datos

jquery d3.js

Question

¿Hay alguna manera posible de cambiar las posiciones de las etiquetas por encima de los datos en el gráfico de barras c3 ? En la documentación oficial, se explica cómo cambiar las posiciones de las etiquetas en los ejes de medición xey con la manipulación de yyx entero, pero no encontré nada para las etiquetas de datos.

He intentado apuntar a él con d3 simple en el que se basa c3 pero console.log me devuelve nulo:

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

porque se dispara antes de generar el gráfico. Puede ver y editar lo que estoy trabajando aquí: http://jsfiddle.net/e60o24d0/

Answer 1

Hay dos formas en que puede afectar esas etiquetas:

a. Usa la transform en CSS:

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

segundo. Selecciónelos usando D3 en la onrendered llamada onrendered :

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}]
        }
    }
});

Esto es mejor que usar setTimeout ya que no es necesario adivinar arbitrariamente cuánto tiempo tomará procesar las etiquetas antes de que pueda seleccionarlas con D3.