Drehen X-Achsen-Etiketten, D3js Multi-Balkendiagramm

Question

Ich möchte meine Etiketten auf der X-Achse drehen. Die Etiketten überlappen sich derzeit. Ich kann jedoch nicht herausfinden, wie man sie in der Vorlage ändert, auf der ich das Balkendiagramm basiert. Meine Annahme ist, dass es irgendwo in den Zeilen unten ist, aber es ist eine Vorlage mit einer Struktur, die ich als d3-Anfänger nicht kenne. Mein Plunker ist 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

Wenn die x-Achse anhängt, können Sie die Etiketten folgende drehen tun:

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: diese überlappen sich mit allen Text/Labels, die Sie in der haben Boden und Sie müssen sie auch entsprechend positionieren, damit die Dinge richtig passen. Sie müssen wahrscheinlich Ihre svg ein wenig vertikal strecken, um alles in Ordnung zu bringen. Ich habe es im Plunkr versucht; Sie können es weiter anpassen, wenn Sie die Grafik um größer zu sein, usw.

Verästelter Plunkr hier wollen - http://plnkr.co/edit/JyFdeX0wy9g0lUKi9ASC?p=preview