旋轉x軸標籤，D3js多條形圖

我想在x軸上旋轉我的標籤。標籤當前重疊。但是，我無法弄清楚如何在基於條形圖的模板中改變它們。我的假設是，它在下面的幾行中，但它是一個模板，我不熟悉作爲D3初學者的結構。我plunker是http://plnkr.co/edit/jtGz8vtYGSHscKhrIob3?p=preview 旋轉x軸標籤，D3js多條形圖

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();

來源

2017-04-04 Howard Smith

當附加在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這裏 - http://plnkr.co/edit/JyFdeX0wy9g0lUKi9ASC?p=preview

來源

2017-04-04 18:16:28 sparta93

這是有道理的！我沒有意識到你可以創建一個新的g.append並控制x軸標籤的角度。這對我製作的其他一些圖表應該有很大的幫助。感謝您的解決方案（以及重新定位）！ = p –

旋轉x軸標籤，D3js多條形圖

回答

相關問題