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

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

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

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

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

Ответ 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>

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

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

Ответ 2

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

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

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

Ответ 3

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

d3fc - это библиотека компонентов, которая имеет украсить шаблон, позволяя вам получить доступ к соединению данных 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)');
  });

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

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