Повернуть текст оси x в d3

Я новичок в кодировании d3 и svg и ищу способ поворота текста на xAxis диаграммы. Моя проблема в том, что обычно заголовки xAxis длиннее, чем бары на гистограмме. Поэтому я ищу, чтобы повернуть текст, чтобы он работал вертикально (а не по горизонтали) под xAxis.

Я попытался добавить атрибут transform: .attr (“transform”, “rotate (180)”)

Но когда я это делаю, текст полностью исчезает. Я попытался увеличить высоту canvasа svg, но не смог просмотреть текст.

Любые мысли о том, что я делаю неправильно, были бы замечательными. Нужно ли также настраивать позиции x и y? И если да, то насколько (трудно устранить неполадки, когда я вижу это в Firebug).

Если вы установите преобразование вращения (180), он вращает элемент относительно начала координат , а не по отношению к текстовому якорю. Итак, если ваши текстовые элементы также имеют атрибут x и y, установленный для их размещения, вполне вероятно, что вы изменили текст за кадром. Например, если вы попытались,

Hello! 

текстовый якорь будет на уровне ⟨-200 100⟩. Если вы хотите, чтобы текстовый якорь оставался на уровне ⟨200,100⟩, вы можете использовать преобразование, чтобы поместить текст перед его rotationм, тем самым изменив начало координат.

 Hello! 

Другой вариант – использовать необязательные аргументы cx и cy для преобразования поворота SVG, чтобы вы могли указать начало вращения. Это заканчивается тем, что немного избыточно, но для полноты оно выглядит так:

 Hello World! 

Бесстыдно выщипывали из другого места , все кредитуют автора.

маржа, включенная только для отображения нижней границы, должна быть увеличена.

 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 – это библиотека компонентов, которая имеет узор украшений, позволяющий вам получить доступ к соединению данных underling, используемому компонентами.

Он имеет замену для оси D3, где rotation метки оси выполняется следующим образом:

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

Обратите внимание, что rotation применяется только к выбору ввода.

введите описание изображения здесь

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

  • Как заменить несколько подстрок строки?
  • Как нарисовать текст На изображении?
  • Как читать текстовый файл в список или массив с помощью Python
  • bigrams вместо отдельных слов в termdocument-матрице с использованием R и Rweka
  • Просмотр Android EditText Плавающая подсказка в дизайне материалов
  • Ограничить длину текста до n строк с помощью CSS
  • Ярлык под изображением в UIButton
  • Разделить большую строку
  • Добавить текст в поле ввода
  • Форматировать текст по ссылке в reStructuredText
  • Сохранение файла Excel в формате .txt без кавычек
  • Interesting Posts
    Давайте будем гением компьютера.