D3 - グループとしてではなくテキスト要素を個別に回転

Question

私は、各バーの意味を説明する下部にテキストを持つバーの縦棒グラフを持っています。しかし、このテキストを私の限られたスペースで読むことができるように、45-65度の間で回転させる必要があります。

"transform","rotate(-65)"を使用すると、whoグループのテキストの中心を回転させるだけで問題に遭遇しました。私はローテーションの基礎となる個々のテキスト要素を選択しないという問題を理解していますが、個別に選択する方法は不明です。

var color = d3.scale.ordinal().range(["#004467","#005481","#00659c","#0076b7","#5480ba","#a17b8b","#cf735c","#f36925"]); 

var ed1_data = [867,674,901,401,127,234,608,866,153,93,701,111,813]; 
var ed1_dataKey = [ 
    "Humanities", 
    "Social sciences", 
    "Life sciences", 
    "Physical sciences", 
    "Computer sciences", 
    "Engineering", 
    "Education", 
    "Business management", 
    "Health", 
    "Law", 
    "Vocational training", 
    "Undeclared", 
    "Other" 
]; 
var ed1_width = 800; 
var ed1_height = 600; 
var ed1_scale = d3.scale.linear() 
    .domain([0,1000]) 
    .range([ed1_height-100,0]); 

var ed1_canvas = d3.select("#ed1-graph") 
    .append("svg") 
    .attr("width",ed1_width) 
    .attr("height",ed1_height) 
    .append("g"); 

var ed1_bars = ed1_canvas.selectAll("rect") 
    .data(ed1_data) 
    .enter() 
    .append("g") 
    .append("rect") 
    .attr("width",40) 
    .attr("fill",function(d){return color(d);}) 
    .attr("x",function(d,i){return 20+(i*60);}) 
    .attr("height",function(d){return (ed1_scale(0)-ed1_scale(d));}) 
    .attr("y",function(d){return ed1_scale(d)-10}); 

var ed1_numbers = ed1_canvas.selectAll(".ed1numbers") 
    .data(ed1_data) 
    .enter() 
    .append("text") 
    .attr("class","ed1numbers") 
    .text(function(d){return d;}) 
    .attr("width",20) 
    .attr("fill","#292215") 
    .attr("text-anchor","middle") 
    .attr("font-family","Franklin Gothic") 
    .attr("x",function(d,i){return 40+(i*60);}) 
    .attr("height",function(d){return (ed1_scale(0)-ed1_scale(d));}) 
    .attr("y",function(d){return ed1_scale(d)-18}) 
    .attr("font-size","1em"); 

ed1_canvas.selectAll("g") 
    .append("text") 
    .attr("font-size","1em") 
    .attr("fill","#292215") 
    .attr("y",510) 
    .attr("text-anchor","end") 
    // .attr("transform","rotate(-65)") THIS IS THE ERROR LINE THAT ISN't DOING WHAT I WANT 
    .attr("x",function(d,i){return 40+(i*60);}) 
    .text(function(d,i){return ed1_dataKey[i];}); 

と支援を容易にするためにCodePen：http://codepen.io/jacob_johnson/pen/mRepoG?editors=1010

これは、最後のコードブロックであり、現在コメントアウトされ

これは使用D3下のグラフのためのJavaScriptです。

ありがとうございます。どんな助けもありがとうございます。

Answer 1

回転と平行移動を1つの変換に追加します。私が欠けていたものだ

.attr("transform",function(d,i){ 
    return "translate(" + (40+(i*60)) + ", 510) " + "rotate(-65)"}) 

http://codepen.io/Aure1ius/pen/BporJZ?editors=1010