在 D3 上旋转标签文本

Question

我正在创建一个 mekko 图表并希望在 x 轴上旋转图例。

我所做的示例：https://codepen.io/fabioTester/pen/JjYeJEv

我想在示例中使用 class "labelTitle" 旋转元素...

我尝试使用以下代码进行旋转：

        // rotation code
        svg.selectAll(".month .labelTitle")
            .attr("transform", function (d) {
                return "translate(0) rotate(-25)"

            });

我猜我的问题是翻译的计算，但不知道如何解决它。

提前感谢您的任何建议。

Answer 1

您似乎忘记将 deg 附加到旋转值。

试试这个：

// rotation code
svg.selectAll(".month .labelTitle")
  .attr("transform", function (d) {
     return "translate(0) rotate(-25deg)"
  });

Answer 2

我注意到标签似乎围绕一个远离其实际位置的点旋转，因此旋转的小幅增加会很快将它们旋转到看不见的地方。

如果您将每个单独标签的 transform-origin 设置为其 x 和 y 位置，它将围绕该点旋转各个标签。

svg
  .selectAll(".month")
  .append("text")
  .text(function (d) {
    return d.key;
  })
  .attr("x", 5)
  .attr("y", function (d) {
    return height - (margin * 2);
  })
  .attr('transform-origin', `5 ${height - (margin * 2)}`)
  .attr("class", "labelTitle");

svg.selectAll('.labelTitle')
  .attr('transform', d => 'translate(0, 10), rotate(25)')

我还注意到您标签的 y-值不考虑边距，所以我也修复了它。

我想出了以下代码笔：https://codepen.io/pitchblackcat/pen/OJyawaV

在 D3 上旋转标签文本

Rotate label text on D3

javascript

transformation

d3.js