2013-07-22 3 views
4

Это мой dimple Гистограмма (питание от d3):Как повернуть текст оси x в dimple.js?

var sidechart = new dimple.chart(chart_svg, data); 
      sidechart.setBounds(60, 30, 200, 300) 
      var x = sidechart.addCategoryAxis("x", "Long name"); 
      sidechart.addMeasureAxis("y", "Measure"); 
      sidechart.addSeries(["Short name", "Long name"], dimple.plot.bar); 
      sidechart.draw(); 

Текст на оси х довольно долго, и по умолчанию ямочка вращается так, что отображается вертикально. Я хочу повернуть его на 45 градусов. Использование d3 это будет сделано, делая это:

myAxis.attr("transform", "rotate(-45)"); 

К сожалению, я не смог найти подобный способ сделать это в ямочки. Любая помощь будет оценена.

ответ

11

Вы можете достать из формы после того, как метод рисования был назван и установить преобразование:

... 
sidechart.draw(); 
x.shapes.selectAll("text").attr("transform", "rotate(-45)"); 

Однако впадина уже использует преобразование для перемещения метки между клещами и сделать вращаться, так что вы возможно, захотите добавить преобразование, как это:

... 
sidechart.draw(); 
x.shapes.selectAll("text").attr("transform", 
    function (d) { 
     return d3.select(this).attr("transform") + " rotate(-45)"; 
    }); 

Я попробовал это, и это смещение этикетки от того, где я ожидал, так что вам может понадобиться добавить перевод, но вы, вероятно, нужно найти подходящий смещение для вашей собственной диаграммы, я использовал здесь 20 в качестве примера:

... 
sidechart.draw(); 
x.shapes.selectAll("text").attr("transform", 
    function (d) { 
     return d3.select(this).attr("transform") + " translate(0, 20) rotate(-45)"; 
    }); 
+0

Именно то, что я искал! Спасибо –

+0

Джон, который отлично! Действительно помог мне. – sweaty

Смежные вопросы