Obróć tekst osi X w d3

Question

Jestem nowy w kodowaniu d3 i svg i szukam sposobu, aby obrócić tekst na xAxis wykresu. Moim problemem jest to, że zazwyczaj tytuły xAxis są dłuższe niż paski na wykresie słupkowym. Dlatego zamierzam obrócić tekst, aby działał pionowo (a nie poziomo) pod xAxis.

Próbowałem dodanie transformacji atrybut: .attr ("przekształcić", "obracać (180)")

Ale kiedy to zrobić, tekst znika całkowicie. Próbowałem zwiększyć wysokość płótna svg, ale nadal nie mogłem wyświetlić tekstu.

Wszelkie przemyślenia na temat tego, co robię źle, będą świetne. Czy muszę również dopasować pozycje x i y? A jeśli tak, to ile (trudne do rozwiązania, gdy widzę to w Firebug).

Answer 1

Jeśli ustawisz transformację obrotu (180), obraca ona element w stosunku do początku, nie w stosunku do zakotwiczenia tekstu. Tak więc, jeśli twoje elementy tekstowe mają również ustawiony atrybut atrybutu i y , jest całkiem prawdopodobne, że obróciłeś tekst poza ekranem. Na przykład, jeśli spróbujesz, zakotwiczenie tekstu będzie miało wartość ⟨-200, 100⟩. Jeśli chcesz, aby zakotwiczenie tekstu pozostało przy ⟨200,100⟩, możesz użyć przekształcenia, aby umieścić tekst przed obróceniem go, zmieniając w ten sposób pochodzenie.

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

Inną opcją jest użycie opcjonalnych cx i CY argumenty SVG na rotate transform, tak aby można było określić pochodzenie obrotów. Ten kończy się będąc nieco zbędny, ale pod względem kompletności, wygląda to tak:

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

Answer 2

Bezwstydnie wyrwane z elsewhere, cały kredyt do autora.

marża uwzględniona tylko w celu wyświetlenia dolnego marginesu powinna zostać zwiększona.

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

Answer 3

Jednym z problemów związanych z tymi obracającymi się etykietami osi D3 jest konieczność ponownego zastosowania tej logiki przy każdym renderowaniu osi. Wynika to z tego, że nie masz dostępu do opcji wyboru wejścia-aktualizacji-wyjścia, których oś używa do renderowania znaczników i etykiet.

d3fc jest biblioteką komponentów, która ma decorate pattern, co pozwala uzyskać dostęp do łączenia danych podrzędnych używanych przez komponenty.

Ma zastąpienie drop-in dla osi D3, gdzie rotacja etykiety osi przeprowadzono następująco:

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

Zauważ, że rotacja jest stosowana tylko w sprawie wyboru wejść.

można zobaczyć kilka innych możliwych zastosowań dla tego wzoru na axis documentation page.