D3.js - 如何在分组条形图的每个条上旋转文本？

Question

我正在使用d3.js并且没有多少经验。我有一个分组的条形图，每个条形上都写有值（水平）。如何旋转它们使它们垂直（旋转90°）？我的代码：

bars.append("text")
      .attr("x", function(d) { return x(d.name); })
      .attr("y", function(d) { return y0(d.value1) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.value1; });

       bars.append("text")
      .attr("x", function(d) { return x(d.name) + barWidth / (2.25); })
      .attr("y", function(d) { return y1(d.value2) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.value2; });

       bars.append("text")
     .attr("x", function(d) { return x(d.name) + barWidth / (4.0); })
      .attr("y", function(d) { return y2(d.value3) + 3; })
      .attr("dy", ".75em")
      .text(function(d) { return d.value3; });

       bars.append("text")
     .attr("x", function(d) { return x(d.name) + barWidth / (1.5); })
      .attr("y", function(d) { return y3(d.value4) + 3; })
      .attr("dy", ".75em")
       .text(function(d) { return d.value4; });

Answer 1

看看my answer to a similar question。

我相信你遇到了链接答案（以及问题本身）中描述的相同问题 - 你的轮换是在一个酒吧的一个角落，而不是在中心周围！这就是为什么标签消失了！

只想突出显示链接问题的解决方案：使用由转换和循环组成的复合转换。示例中的代码如下所示:(并且您的代码应该类似;在将相同的策略应用于您的情况之前，您只需要了解链接的jsfiddles中的代码）

  node.selectAll("text.nodeValue")
      .text(function (d) { return formatNumber(d.value); })
      .attr("text-anchor", "middle")
      .attr("transform", function (d) {
           return "rotate(-90) translate(" +
                       (-d.dy / 2) +
                       ", " +
                       (sankey.nodeWidth() / 2 + 5) +
       ")";});

图片之前/之后：

BEFORE

AFTER

Answer 2

在svg中，使用transform属性移动/旋转元素非常容易。因此你可以做（​​如Lars Kotthoff所建议的那样）：

bars.selectAll("text").attr("transform","rotate(90)")

此外，根据您发布的代码，我建议您查看选择，以便不手动生成每个条形图例。本教程可以为您提供帮助：Let's Make a Bar Chart