поворот текста оси x в d3
Я новичок в кодировании d3 и svg и ищу способ поворота текста на оси диаграммы. Моя проблема заключается в том, что обычно заголовки xAxis длиннее, чем бары в гистограмме широки. Поэтому я ищу, чтобы повернуть текст, чтобы работать вертикально (а не горизонтально) под xAxis.
Я пробовал добавить атрибут transform: .attr ("transform","rotate (180)")
но когда я это делаю, текст исчезает совсем. Я пробовал увеличить высота холста svg, но все еще не удалось просмотреть текст.
любые мысли о том, что я делаю неправильно было бы здорово. Нужно ли также настраивать позиции x и y? И, если да, то насколько (трудно устранить неполадки, когда я вижу его в Firebug).
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>
бессовестно вырвали из в другом месте все заслуга автора.
маржа включена только для того, чтобы показать, что нижняя маржа должна быть увеличена.
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-это библиотека компонентов, которая имеет украсить рисунком позволяет получить доступ к нижестоящему соединению данных, используемому компонентами.
Он имеет падени-в замене для оси 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.