0

d3で作成したd3スタックヒストグラムのx軸ラベルを回転させようとしています。すべてのラベルは、長い文字列として表示されるか、すべてが重なり合って表示されます。

これが私のレーベルコードです：

var shortNames = ["label1", "label2", "label3", "label4"];

// Add a label per experiment.
var label = svg.selectAll("text")
.data(shortNames)
.enter().append("svg:text")
.attr("x", function(d) { return x(d)+x.rangeBand()/2; })
.attr("y", 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")
.text(function(d) {return d})
.attr("transform", function(d) {    // transform all the text elements
return "rotate(-65)"            // rotate them to give a nice slope
});

翻訳機能を試してみましたが、すべてのラベルは1つの長い文字列として扱われます。個々のラベルに翻訳を適用するにはどうすればよいですか？

後で余白をいじることができますが、今のところ、ラベルを制御したいと思います。

x軸ラベルの問題の図

4

1 に答える 1

1

問題は変換の順序だと思います。テキストを回転すると、その座標系も回転します。したがって、x位置を設定すると、回転変換よりも前に位置を設定している場合でも、実際には回転によって65度の軸に沿って移動します。

これについて正しければ、ラベルを調べると、すべてのラベルに1つのテキスト要素ではなく、複数のテキスト要素（ラベルごとに1つ）で構成されていることがわかります。

原則として、の場合と同じようにtransform属性を導入する場合はrotate、この属性を介してすべての変換を行う必要があります。translateしたがって、属性を使用する代わりにを使用する必要があり"x"ます。次に、次のようになります。

var label = svg.selectAll("text")
.data(shortNames)
.enter().append("svg:text")
// REOVE THIS: .attr("x", function(d) { return x(d)+x.rangeBand()/2; })
// AND THIS TOO: .attr("y", 6)
.attr("text-anchor", "middle")
.attr("dy", ".71em")
.text(function(d) {return d})
.attr("transform", function(d) {    // transform all the text elements
  return "translate(" + // First translate
    x(d)+x.rangeBand()/2 + ",6) " + // Translation params same as your existing x & y 
    "rotate(-65)"            // THEN rotate them to give a nice slope
});
于 2013-03-14T20:56:26.733 に答える