D3上的旋转标签文本

Question

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

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

我想在示例中旋转带有“ labelTitle”类的元素...

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

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

            });

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

谢谢您的任何建议。

Answer 1

[我注意到标签似乎围绕一个远离其实际位置的点旋转，因此旋转的微小增加会迅速将它们旋转到视线之外。

如果将每个单独标签的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值不遵守边距，因此我也对此进行了修正。

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

Answer 2

似乎您忘记了附加deg来旋转值。

尝试一下：

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