web-dev-qa-db-fra.com

Comment puis-je positionner des étiquettes d'axe x pivotées sur un graphique à colonnes à l'aide de nvd3?

Je construis un graphique à barres à l'aide du multiBarChart de nvd3 et je dois ajuster la position des étiquettes d'axe x pivotées:

enter image description here

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

Je voudrais que les étiquettes des colonnes ne chevauchent pas le graphique et soient centrées sous chaque barre. Je pourrais sélectionner les étiquettes après avoir tracé le graphique et les ajuster, mais existe-t-il un moyen plus simple?

javascriptchartsd3.jsvisualizationnvd3.js
25
David Tinker

La meilleure façon de gérer cela consiste à effectuer vous-même la rotation des libellés de ticks de l'axe des abscisses. Pourquoi? Parce que NVD3 ne gère pas correctement la rotation et les traductions associées. Regardez votre image et vous verrez que la bibliothèque permet à la rotation de traduire les étiquettes directement sous les colonnes qu'elles représentent. Il commence également à mal gérer les valeurs axis.tickPadding(), et ainsi de suite.

La première chose à faire est de s’assurer que le graphique a suffisamment d’espace pour les étiquettes traduites, comme ceci:

chart.margin({bottom: 60});

Nous pouvons ensuite traduire et faire pivoter les étiquettes:

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

Les étiquettes ressemblent maintenant à ceci:

Rotated / translated labels

34
River

Pour un graphique multiple, vous pouvez ajouter " '#' + containerId + 'svg " dans le d3.select comme ci-dessous:

//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)' });

Quoi qu'il en soit, merci pour la réponse @River.

5
Simon

Ce qui suit a fonctionné pour moi:

chart.axislist["xAxis"]["rotateLabels"]= -45
1
Eric Jodet

Cela a fonctionné pour moi. La principale raison pour laquelle je soumets ceci est que changer l'ancre est plus agréable que de traduire la position manuellement.

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;
});
1
Gordon Siegfriedt

Il y a une alternative CSS.

.nv-x .tick text {
    transform: rotate(-90deg) translateX(-15px) translateY(-7px);
}
0
Rodris

Quelle que soit votre rotation de texte, indiquez début/milieu/fin

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