x軸ラベル、D3jsマルチバーチャートを回転させます

Question

x軸にラベルを回転します。ラベルは現在重なっています。しかし、私は棒グラフに基づいてテンプレートの中でそれらをどのように変更するかを理解できません。私の前提は、それが下の行のどこかにあることですが、d3の初心者としては慣れていない構造のテンプレートです。私plunkerはhttp://plnkr.co/edit/jtGz8vtYGSHscKhrIob3?p=preview

d3.csv("data.csv", function(d, i, columns) { 
    for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]]; 
    return d; 
}, function(error, data) { 
    if (error) throw error; 

    var keys = data.columns.slice(1); 

    x0.domain(data.map(function(d) { return d.n; })); 
    x1.domain(keys).rangeRound([0, x0.bandwidth()]); 
    y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice(); 



    var rectG = g.append("g") 
    .selectAll("g") 
    .data(data) 
    .enter().append("g") 
    .attr("transform", function(d) { return "translate(" + x0(d.n) + ",0)"; }) 
    .selectAll("rect") 
    .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); }) 
    .enter(); 

ある

Answer 1

x軸を追加するときは、ラベルを回転させるために次の操作を行うことができます。

g.append("g") 
    .attr("class", "axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(d3.axisBottom(x0)) 
    //select all text labels in the axis, then position + rotate 
    .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-1em") 
     .attr("dy", "-0.5em") 
     .attr("transform", "rotate(-90)"); 

PS：これはあなたが持っているすべてのテキスト/ラベルと重複しますそれに応じて適切に配置する必要があります。あなたはおそらく、あなたのsvgを少し垂直に伸ばして、すべてをフィットさせる必要があります。私はそれをplunkrで試してみた。あなたが大きくなるにグラフをしたい場合は、など

フォークPlunkrここでは、さらにそれを調整することができます - http://plnkr.co/edit/JyFdeX0wy9g0lUKi9ASC?p=preview