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

问题描述

这是我的条形图（由d3强力驱动）：

This is my dimple bar chart (powered by 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轴上的文本相当长，默认情况下，dimple会旋转它，使其垂直显示。我想把它旋转45度。使用d3可以这样做：

Text on x-axis is quite long and by default dimple rotates it so it is displayed vertically. I want to rotate it by 45 degrees instead. Using d3 this would be done by doing this:

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

不幸的是，我在dimple中找不到类似的方法。

Unfortunately I am unable to find a similar way of doing that in dimple. Any help will be appreciated.

推荐答案

一旦绘制方法被调用并设置一个变换，你就可以获得这些形状：

You can get hold of the shapes once the draw method has been called and set a transform:

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

但是，dimple已经使用转换来移动标签并执行旋转，想要像这样附加转换：

However dimple already uses the transform to move the labels between the ticks and do the rotate, so you might want to append the transform like this:

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

我试过这个，它偏移了我期待的标签，所以你可能需要添加但是你可能需要为自己的图表找到一个合适的偏移量，我在这里用20作为例子：

I tried this and it offset the labels from where I was expecting, so you may need to add a translate in, but you'll probably need to find an appropriate offset for your own chart, I've used 20 here as an example:

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

这篇关于如何在dimple.js中旋转x轴文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！