posizione c3js delle etichette dati

Question

C'è un modo possibile per modificare una posizione delle etichette sopra i dati nel grafico a barre c3? Nella documentazione ufficiale si spiega bene come modificare le posizioni delle etichette sugli assi di misurazione xey con la manipolazione di y e x integer, ma non ho trovato nulla per le etichette dei dati.

Ho cercato di indicare con pianura d3 su cui si basa c3 ma console.log mi restituisce un valore nullo:

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

perché spara prima della generazione del grafico. È possibile visualizzare e modificare quello che sto lavorando qui: http://jsfiddle.net/e60o24d0/

Answer 1

Ci sono due modi per influenzare quelle etichette:

a. Utilizzare transform in CSS:

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

b. Selezionarle utilizzando D3 nella onrendered callback:

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

Questo è meglio che usare setTimeout come allora non c'è bisogno di fare un'ipotesi arbitraria di quanto tempo ci vorrà per rendere le etichette prima di sei in grado di selezionarli con D3.