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

【问题标题】：How to rotate x-axis text in dimple.js?如何在dimple.js中旋转x轴文本？
【发布时间】：2013-07-21 10:40:30
【问题描述】：

这是我的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)");

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

【问题讨论】：

标签： javascript d3.js dimple.js

【解决方案1】：

一旦调用 draw 方法并设置变换，您就可以获取形状：

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

但是dimple 已经使用变换在刻度之间移动标签并进行旋转，因此您可能希望像这样附加变换：

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

【讨论】：

正是我想要的！谢谢