web-dev-qa-db-fra.com

faire pivoter le texte de l'axe x dans d3

Je suis nouveau dans le codage d3 et svg et je 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 diagramme à barres larges. Je cherche donc à faire pivoter le texte pour qu'il soit placé verticalement (plutôt qu'horizontalement) sous xAxis.

J'ai essayé d'ajouter l'attribut de transformation: .attr ("transform", "rotation (180)")

Mais quand je le fais, le texte disparaît complètement. J'ai essayé d'augmenter la hauteur de la zone de travail svg, mais je n'ai toujours pas pu afficher le texte.

Toute pensée 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).

textsvgtransformd3.js
72
jschlereth

Si vous définissez une transformation de rotate (180), l'élément est mis en rotation par rapport à l'origine et non par rapport à l'ancre de texte. Ainsi, si vos éléments de texte ont également un attribut 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é,

<text x="200" y="100" transform="rotate(180)">Hello!</text>

l'ancre du texte serait à-200,100⟩. Si vous souhaitez que l'ancre de texte reste à 200 000 euros, vous pouvez utiliser la transformation pour positionner le texte avant de le faire pivoter, modifiant ainsi l'origine.

<text transform="translate(200,100)rotate(180)">Hello!</text>

Une autre option consiste à utiliser les arguments cx et cy facultatifs des fichiers SVG transformation par rotation , afin de pouvoir spécifier l'origine de la rotation. . Cela finit par être un peu redondant, mais pour être complet, cela ressemble à ceci:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
153
mbostock

Cueilli sans vergogne de ailleurs , tout crédit à l'auteur.

la marge incluse uniquement pour indiquer 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)");
41
20man

Un problème avec cette rotation des étiquettes d'axe D3 est que vous devez réappliquer cette logique à chaque rendu de l'axe. En effet, vous n'avez pas accès aux sélections enter-update-exit utilisées par l'axe pour restituer les ticks et les libellés.

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

Il remplace l’axe D3 par un système d’insertion directe, dans lequel 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 est uniquement appliquée à la sélection d'entrée.

enter image description here

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

1
ColinE