повернуть текст по оси X в d3

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

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

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

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

Ответы на вопрос(3)

Одна проблема с этими вращающимися метками оси 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)');
  });

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

enter image description here

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

Бесстыдно сорвал св другом местеВсе заслуга автора.

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

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)");
Решение Вопроса

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

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

привязка к тексту будет в & # x27E8; -200,100 & # x27E9 ;. Если вы хотите, чтобы привязка текста оставалась по адресу & # x27E8; 200,100 & # x27E9;, то вы можете использовать преобразование, чтобы расположить текст перед поворотом, тем самым изменив исходную точку.

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

Другой вариант заключается в использовании дополнительногоcx а такжеcy аргументы к SVG & # x2019; sповорот преобразования, так что вы можете указать источник вращения. Это оказывается немного избыточным, но для полноты, это выглядит так:

<text x="200" y="100" transform="rotate(180,200,100)">Hello World!</text>
 jschlereth29 июн. 2012 г., 20:42
Понял ... text-anchor = & end; end & apos; & lt; text text-anchor = & quot; end & quot; transform = "translate (20,130) rotate (-90)" & quot; title1 & lt; / text & gt; Еще раз спасибо за помощь, Майк. Ты жжешь!
 jschlereth29 июн. 2012 г., 19:23
Звучит хорошо. Сделаю. Спасибо!
 jschlereth29 июн. 2012 г., 18:52
Хорошо, так что это идеально. Спасибо, Майк. Это делает (почти) все, что мне нужно сделать. Но теперь вопрос в том, как мне автоматически изменить позицию y в зависимости от длины переменной? ЕСЛИ я установил базовую линию как & lt; text font-size = & quot; 12px & quot; transform = "translate (20,170)" rotate (-90) "& quot; title 1 & lt; / text & gt ;. это нормально. но, скажем, следующий заголовок длиннее, я не хочу, чтобы он перекрывал график, и я также хочу минимизировать пространство между осью XA и самим графиком.
 29 июн. 2012 г., 19:15
Если я ответил на ваш вопрос, пожалуйста, установите флажок, чтобы пометить вопрос как ответивший. Если у вас есть дополнительный вопрос, пожалуйста, создайте новый вопрос! Я думаю, что вы, возможно, спрашиваете об атрибуте text-anchor для установки выравнивания текста или, возможно, об атрибуте dy для установки базовой линии текста.

Ваш ответ на вопрос