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

Question

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

Я попытался добавить атрибут преобразования: .attr ("преобразование", "вращать (180)")

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

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

Answer 1

Если вы установили поворот поворота (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> 

Другой вариант заключается в использовании дополнительных сх и Cy аргументы SVG-х rotate transform, так что вы можете указать начало вращения. Это заканчивает тем, что немного излишним, но для полноты картины, это выглядит следующим образом:

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

Answer 2

бесстыдно сорвал с elsewhere, все кредит автора.

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

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

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

d3fc - это библиотека компонентов, которая имеет decorate pattern, что позволяет получить доступ к соединению данных underling, используемому компонентами.

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

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

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

Вы можете увидеть некоторые другие возможные применения для этой модели на axis documentation page.