повернути текст осі х у d3

Я новачок у кодуванні d3 та svg і шукаю спосіб обертати текст по осі x діаграми. Моя проблема полягає в тому, що, як правило, заголовки xAxis довші, ніж стовпчики на гістограмі, широкі. Тому я прагну повернути текст, щоб він працював вертикально (а не горизонтально) під xAxis.

Я спробував додати атрибут transform: .attr ("перетворити", "повернути (180)")

Але коли я це роблю, текст взагалі зникає. Я намагався збільшити висоту полотна svg, але все одно не зміг переглянути текст.

Будь-які думки про те, що я роблю неправильно, були б чудовими. Чи потрібно мені також регулювати положення x та y? І якщо так, то на скільки (важко усунути неполадки, коли я бачу це у Firebug).

Якщо ви встановите перетворення обертання (180), воно поверне елемент відносно початку координат , а не відносно прив'язки тексту. Отже, якщо у ваших текстових елементах також є атрибут x та y, встановлений для їх розташування, цілком ймовірно, що ви повернули текст поза екраном. Наприклад, якщо ви спробували,

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

прив'язка тексту буде на рівні ⟨-200 100⟩. Якщо ви хочете, щоб прив'язка тексту залишалася на рівні «200 100», тоді ви можете використовувати перетворення, щоб розташувати текст перед його обертанням, тим самим змінивши початок.

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

Іншим варіантом є використання необов’язкових аргументів cx та cy для перетворення SVG на обертання , щоб ви могли вказати початок обертання. Це закінчується трохи зайвим, але для повноти виглядає це так:

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

Безсоромно зірвано з інших місць , за це заслуга автора.

маржа, включена лише для відображення нижньої маржі, повинна бути збільшена.

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

Однією з проблем, що обертаються мітки осей D3, є те, що вам доведеться застосовувати цю логіку кожного разу, коли ви рендеріть вісь. Це пов’язано з тим, що у вас немає доступу до вибору введення-оновлення-виходу, який вісь використовує для візуалізації галочок та міток.

d3fc - це бібліотека компонентів, яка має шаблон оздоблення, що дозволяє отримати доступ до об'єднаних даних, що використовуються компонентами.

Він має заміну осі D3, де обертання мітки осі виконується наступним чином:

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

Зверніть увагу, що обертання застосовується лише до виділення введення.

Ви можете побачити деякі інші можливі варіанти використання цього шаблону на сторінці документації до осі .