旋转x轴标签，D3js多条形图

Question

我想在 x 轴上旋转我的标签。标签当前重叠。但是，我无法弄清楚如何在基于条形图的模板中更改它们。我的假设是它在下面几行中的某个地方，但它是一个模板，其结构我作为 d3 初学者并不熟悉。我的朋友是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