Obróć tekst w osi x w d3

Jestem nowy w kodowaniu D3 i svg i szukam sposobu na obracanie tekstu na xAxis wykresu. Mój problem polega na tym, że zazwyczaj tytuły xAxis są dłuższe niż słupki na wykresie słupkowym są szerokie. Chcę więc obrócić tekst, aby działał pionowo (a nie poziomo) pod xAxis.

Próbowałem dodać atrybut transform: .attr ("transform","rotate(180)")

Ale kiedy to robię, tekst znika całkowicie. Próbowałem zwiększyć wysokość svg canvas, ale nadal nie był w stanie wyświetlić tekstu.

Wszelkie myśli na temat tego, co robię źle byłoby świetnie. Czy muszę również dostosować pozycje x i y? A jeśli tak, to o ile (trudno rozwiązać, gdy widzę to w Firebug).

Author: jschlereth, 2012-06-29
Source

3 answers

Jeśli ustawisz transformację rotate(180), obróci ona element względem początku, a nie względem zakotwiczenia tekstu. Jeśli więc twoje elementy tekstowe mają atrybut xi y ustawiony, aby je pozycjonować, jest całkiem prawdopodobne, że obróciłeś tekst poza ekranem. Na przykład, jeśli próbowałeś, 

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

Zakotwiczenie tekstu miałoby wartość ⟨-200,100⟩. Jeśli chcesz, aby zakotwiczenie tekstu pozostało na poziomie ⟨200,100⟩, możesz użyć przekształcenia, aby ustawić tekst przed obróceniem to, zmieniając w ten sposób pochodzenie.

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

Inną opcją jest użycie opcjonalnych argumentów CXi cydo transformacji SVG rotate, aby można było określić pochodzenie rotacji. To kończy się być trochę zbędne, ale dla kompletności wygląda to tak: 

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
 136
Author: mbostock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-09 22:15:51

Bezwstydnie wyrwane z gdzie indziej , cała zasługa autora.

Margines uwzględniony tylko w celu pokazania dolnego marginesu powinien zostać zwiększony.

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)");
 38
Author: 20man,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-21 23:31:35

Jeden problem z obracającymi się etykietami osi D3 polega na tym, że musisz ponownie zastosować tę logikę za każdym razem, gdy renderujesz oś. Dzieje się tak dlatego, że nie ma dostępu do zaznaczenia enter-update-exit, którego oś używa do renderowania wskazów i etykiet.

D3fc jest biblioteką komponentów, która posiada wzór dekorowania pozwalający na uzyskanie dostępu do bazy danych używanej przez komponenty.

Posiada zamiennik drop-in dla osi D3, gdzie wykonuje się obrót etykiety osi jak następuje: 

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 obrót jest stosowany tylko przy zaznaczeniu enter.

Tutaj wpisz opis obrazka

Inne możliwe zastosowania tego wzorca można zobaczyć na stronie dokumentacji osi .

 1
Author: ColinE,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-27 09:00:35