如何在dimple.js中旋转x轴文本?

时间:2013-07-22 15:47:42

标签: javascript d3.js dimple.js

这是我的dimple条形图(由d3提供支持):

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();

x轴上的文字非常长,默认情况下,凹坑旋转它以便垂直显示。我想将它旋转45度而不是。使用d3可以通过以下方式完成:

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

不幸的是,我无法在酒窝中找到类似的方法。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:11)

一旦调用了draw方法并设置了变换,就可以掌握形状:

...
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)";
    });