поворот текста оси x в d3

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

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

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

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

3 66
text svg d3.js monad-transformers

3 ответа:

Если вы установите преобразование rotate (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 и ТИЦ аргументы для SVG поворот преобразование, так что вы можете указать происхождение вращения. Это в конечном итоге немного избыточно, но для полноты, это выглядит так:

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

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

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

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

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

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

1