faire pivoter le texte de l’axe x dans d3

Je suis nouveau sur le codage d3 et svg et cherche un moyen de faire pivoter le texte sur le xAxis d’un graphique. Mon problème est que les titres xAxis sont généralement plus longs que les barres du graphique à barres. Je cherche donc à faire pivoter le texte pour qu’il soit vertical (plutôt qu’horizontalement) sous le xAxis.

J’ai essayé d’append l’atsortingbut de transformation: .attr (“transformer“, “rotate (180)”)

Mais quand je fais cela, le texte disparaît complètement. J’ai essayé d’augmenter la hauteur du canevas svg, mais je n’ai toujours pas pu voir le texte.

Toute reflection sur ce que je fais mal serait géniale. Dois-je également ajuster les positions x et y? Et si oui, de combien (difficile à résoudre quand je peux le voir dans Firebug).

Si vous définissez une transformée de rotation (180), elle fait pivoter l’élément par rapport à l’origine et non par rapport à l’ancre de texte. Ainsi, si vos éléments de texte ont également un atsortingbut x et y défini pour les positionner, il est fort probable que vous ayez fait pivoter le texte hors écran. Par exemple, si vous avez essayé,

Hello! 

l’ancre de texte serait à ⟨-200,100⟩. Si vous souhaitez que l’ancrage de texte rest à ⟩200, 100, vous pouvez utiliser la transformation pour positionner le texte avant de le faire pivoter, modifiant ainsi l’origine.

 Hello! 

Une autre option consiste à utiliser les arguments optionnels cx et cy dans la transformation de rotation de SVG, afin que vous puissiez spécifier l’origine de la rotation. Cela finit par être un peu redondant, mais pour être complet, cela ressemble à ceci:

 Hello World! 

Sans scrupule, arraché d’ ailleurs , tout crédit à l’auteur.

marge incluse uniquement pour montrer que la marge inférieure doit être augmentée.

 var margin = {top: 30, right: 40, bottom: 50, left: 50}, svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); 

Un problème avec cette rotation des étiquettes d’axe D3 est que vous devez réappliquer cette logique chaque fois que vous restituez l’axe. Cela est dû au fait que vous n’avez pas access aux sélections enter-update-exit utilisées par l’axe pour afficher les graduations et les étiquettes.

d3fc est une bibliothèque de composants dotée d’un motif de décoration qui vous permet d’accéder à la jointure de données sous-jacente utilisée par les composants.

Il a un remplacement instantané pour l’axe D3, où la rotation de l’étiquette de l’axe est effectuée comme suit:

 var axis = fc.axisBottom() .scale(scaleBand) .decorate(function(s) { s.enter() .select('text') .style('text-anchor', 'start') .attr('transform', 'rotate(45 -10 10)'); }); 

Notez que la rotation n’est appliquée que sur la sélection d’entrée.

entrer la description de l'image ici

Vous pouvez voir d’autres utilisations possibles de ce modèle sur la page de documentation de l’ axe .