rotation de l'axe x de texte en d3

Je suis nouveau sur d3 et svg de codage et suis à la recherche d'un moyen pour faire pivoter le texte sur la xAxis d'un graphique. Mon problème est que, généralement, les xAxis titres sont plus longs que les barres de l'histogramme sont larges. Donc, je suis à la recherche pour faire pivoter le texte verticalement plutôt qu'horizontalement) sous la xAxis.

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

Mais quand je fais ça, le texte disparaît complètement. J'ai essayé d'augmenter la hauteur de la svg, canvas, mais n'était toujours pas en mesure d'afficher le texte.

Des idées sur ce que je fais mal serait génial. Dois-je également ajuster les positions x et y? Et, si oui, de combien (difficile à résoudre quand je le vois dans Firebug).

InformationsquelleAutor jschlereth | 2012-06-28

152

Si vous définissez une transformation de rotation(180), il fait pivoter l'élément par rapport à l'origine, pas par rapport au texte d'ancrage. Donc, si votre texte éléments ont également un x et y attribut de position, il est très probable que vous avez fait pivoter le texte hors de l'écran. Par exemple, si vous avez essayé,
```
<text x="200" y="100" transform="rotate(180)">Hello!</text>
```
le texte d'ancrage serait à ⟨-200,100⟩. Si vous souhaitez que le texte d'ancrage pour rester au ⟨200,100⟩, alors vous pouvez utiliser la transformation de positionner le texte avant de le tourner, changeant ainsi l'origine.
```
<text transform="translate(200,100)rotate(180)">Hello!</text>
```
Une autre option est d'utiliser l'option cx et cy arguments au format SVG est tourner transformer, de sorte que vous pouvez spécifier l'origine de la rotation. Cela finit par être un peu redondant, mais pour être complet, il ressemble à ceci:
```
<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
```
- Ok, donc c'est parfait. Merci, Mike. Ce n'est (presque) tout ce que je dois faire. Mais maintenant, la question est comment puis-je modifier automatiquement la position sur l'axe y en fonction de la longueur de la variable? SI j'ai mis la ligne de base comme: <texte font-size="12px" transform="translate(20,170) tourner(-90)">titre 1</texte>. c'est très bien. mais de dire le titre est plus long que je ne veux pas avoir de recouvrir le graphique et j'avais aussi envie de réduire l'espace entre les xAxis et le graphe lui-même.
- Si j'ai répondu à votre question, s'il vous plaît ajouter une case à cocher pour marquer la question répondu. Si vous avez une question supplémentaire, veuillez créer une nouvelle question! Je pense que vous pouvez peut-être poser des questions sur le texte d'ancre attribut pour définir l'alignement du texte, ou, éventuellement, la dy attribut pour définir le texte de base.
- Sonne bien. Va faire. Merci!
- Eu...text-anchor= " fin " <text text-anchor="fin" transform="translate(20,130) tourner(-90)">title1</texte> Merci encore pour l'aide, Mike. Vous rock!
InformationsquelleAutor mbostock

Sans vergogne pincées de d'ailleurs, tout le crédit à l'auteur.

marge inclus uniquement pour montrer la marge du bas devrait être augmenté.

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)");

InformationsquelleAutor 20man

1

Un problème avec ce tournant D3 étiquettes de l'axe est-ce que vous avez à ré-appliquer cette logique à chaque fois que vous effectuez le rendu de l'axe. C'est parce que vous n'avez pas accès à l'entrée de la mise a jour de la sortie de sélections que l'axe utilise pour rendre les tiques et les étiquettes.

d3fc est un composant de la bibliothèque qui a un décorer modèle vous permettant d'accéder au sous-fifre de liaison de données utilisées par les composants.

Il a une baisse-dans le remplacement pour la D3 axe, d'où des étiquettes de l'axe de rotation 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)');
  });
```
Avis que la rotation n'est appliquée sur l'entrée de sélection.

Vous pouvez voir quelques autres usages possibles de ce modèle sur la axe page de documentation.

InformationsquelleAutor ColinE

Vous devez vous connecter pour publier un commentaire.