Come posso posizionare le etichette dell'asse x ruotato sul grafico a colonne usando nvd3?

Sto costruendo un grafico a barre usando multiBarChart di nvd3 e la necessità di regolare la posizione ruotata etichette di asse x:Come posso posizionare le etichette dell'asse x ruotato sul grafico a colonne usando nvd3?

enter image description here

var chart = nv.models.multiBarChart(); 
... 
chart.rotateLabels(-90);

desidero le etichette di colonna per non sovrapporsi grafico e centrare sotto ogni barra. Potrei selezionare le etichette dopo aver tracciato il grafico e regolarle ma c'è un modo più semplice?

fonte

2012-10-30 David Tinker

Il modo migliore che ho trovato per gestire questa situazione è quello di eseguire la rotazione del tick asse x etichette da soli. Perché? Perché NVD3 non sta gestendo correttamente la rotazione e le traduzioni associate. Guarda la tua immagine e vedrai che la libreria consente alla rotazione di tradurre le etichette direttamente dalle colonne che rappresentano. Inizia inoltre a maneggiare in modo errato i valori axis.tickPadding() e così via.

La prima cosa che devi fare è quello di garantire che il grafico ha abbastanza spazio per le etichette tradotte, in questo modo:

chart.margin({bottom: 60});

Possiamo poi tradurre e ruotare le etichette:

var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;

Le etichette apparire così:

Rotated/translated labels

fonte

2012-11-20 11:38:33 River

grazie per questo. Dove dovresti farlo? Ho diversi grafici, e se ti faccio come dici tu, funziona solo per il primo grafico. Forse ci sono alcune condizioni di gara e devo solo ruotare le etichette quando sono sicuro che i grafici hanno finito di disegnare. Qualche idea su come saperlo? – huyz

Avresti bisogno di trovare un modo per selezionare tutti i xTicks allo stesso tempo (cambiando il selettore '.nv-x.nv-axis> g' a qualcosa di sensato), ma potrebbe essere difficile. Probabilmente devi fare questo per ognuno, selezionando i loro xTicks a turno. Assicurati di dare a ciascun grafico la propria classe/id in modo da poterli facilmente selezionare. – River

Grazie per aver funzionato per me –

Per grafico multipla, il può aggiungere "'#' + containerId + 'svg" nel d3.select come di seguito:

//Rotate x-axis label 
var xTicks = d3.select('#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g'); 
xTicks 
    .selectAll('text') 
    .attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });

In ogni modo, Grazie per @River risposta.

fonte

2013-12-05 06:59:47 Simon

Solo una nota per dire che puoi (e dovresti) farlo per uno qualsiasi degli altri tipi di grafici. È una buona idea specificare il contenitore D3 specifico su cui stai operando, specialmente se sono coinvolti più grafici. –

questo ha funzionato per me. Il motivo principale per cui sto presentando questo è che cambiare l'ancora è più bello che tradurre la posizione manualmente.

var xTicks = d3.select('.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text'); 
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ; 
xTicks.attr('text-anchor',function() { 
    var anchor; 
    if(angle > 0){ anchor = 'start'; } 
    else if(angle < 0){ anchor = 'end'; } 
    else { anchor = 'middle'; } 
    return anchor; 
});

fonte

2014-06-04 18:03:55

Leggero cambiamento suggerito '' 'xTicks.style ({'text-anchor': (function() {var anchor; ....})()});' '' – user25064

Qualunque cosa rotazione del testo è dare inizio/metà/fine

d3.select('.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start'); //start/middle/end

fonte

2014-12-11 05:23:10 Rayiez

Di seguito ha lavorato per me:

chart.axislist["xAxis"]["rotateLabels"]= -45

fonte

2016-05-26 09:04:15

Come posso posizionare le etichette dell'asse x ruotato sul grafico a colonne usando nvd3?

risposta

Problemi correlati