旋转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多条形图

回答

相关问题