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) +
       ")";});

之前/之后的图片：

之前

之后

Answer 2

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

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

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