rotation de l'axe x de texte en d3

Question

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.

Toute réflexion 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).

Answer 1

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, des éléments ont un x et y ensemble d'attributs 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 pour SVG de 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!</text>

Answer 2

Sans vergogne pincées 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", function(d) {
         return "rotate(-65)" 
     });