Как изменить ориентацию текста svg

Question

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

Вот мой Plunkr - http://plnkr.co/edit/ghP0armaGK7NYhZfhzTs?p=preview

код, который представляет интерес

svg.append("text") 
      .attr("class", "y label") 
      .attr("text-anchor", "end") 
      .attr("y", -width/12) 
      .attr("x", -height/3) 
      .attr("dx","-5em") 
      .attr("dy", "-.75em") 
      .attr("transform", "rotate(-90)") 
      .text(yLabel); 

с -90 Y-Лейбл «Value» идет снизу вверх, но то, что я хочу, это «вершина» на «дно ».

(я пытался -270 только увидеть текст собьют из экрана. Я явно не понимая, как преобразование поворота работы)

Благодарности

Answer 1

Абсолютно не нужно тратить время на вычисление смещений вращающихся элементов. У вас будет только уродливое пюре чисел, которое никому не будет иметь смысла и будет кошмаром для поддержания.

SVG renderer может выполнить все эти вычисления для вас. Просто используйте элемент <g>, чтобы преобразовать начало координат в нужное место, а затем выполните поворот. Все, что родилось на этом элементе, затем вращается вокруг него, а не вращается вокруг какого-то далекого неродственного местоположения.

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

svg.append("g") 
.attr("transform", "translate(-"+width*0.1+","+height*0.45+")") 
.append("text") 
.attr("class", "y label") 
.attr("text-anchor", "end") 
.attr("transform", "rotate(-90)") 
.text(yLabel); 

Answer 2

После поворота, вам нужно перевести текст, смещение по оси Y и смещение высоты (текст вращается вокруг заданных x и y для элемента, а не центра отображаемого текста, как вы ожидали). Например, модифицируя перевести это задание (вы хотите использовать переменные надлежащим образом, я просто подключить в числах, которые работали в качестве примера):

.attr("transform", "translate(-75, 350) rotate(90)") 

Вы также можете изменить ваш x и y так что он является центром текстового элемента (с использованием dx и dy для надлежащего смещения), так что текст вращается вокруг центральной точки, что, вероятно, является более чистым подходом, но я стараюсь просто сделать перевод и встать на моем пути.