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

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

1 个答案: