5

これは私のえくぼ棒グラフです (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)");

残念ながら、ディンプルでそれを行う同様の方法を見つけることができません。どんな助けでも大歓迎です。

4

1 に答える 1

12

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)";
    });
于 2013-07-22T16:14:11.773 に答える