d3.js - 无需旋转即可翻译多个标签

Question

我对d3相对较新，我正在尝试增加一个雷达图，使其在点击时旋转，下一个轴直接指向上方。

我正在使用的示例here。

问题

目前，当单击svg时，我会根据图形中的轴数将整个svg旋转指定的角度。由于我正在旋转整个svg，因此附加到每个轴的标签也会旋转（如下图所示）。

该文字目前无法阅读，我希望获得一个更类似于下图的解决方案：

我希望每个标签与各自的轴保持一致，并且在svg旋转后也保持直立，但我发现很难实现这一点。

的jsfiddle

这个JSFIDDLE是当前实现的精简代码（我遗漏了许多失败的尝试）和下面的代码，它们将在＆lt; rotateOnClick＆＃39;函数是我到目前为止最接近解决方案的函数（到目前为止我还没有使用索引i变量，但我的目的是在点击时交换标签的位置）。

            g.selectAll(".legend")
            .transition()
            .duration(cfg.rotateDuration)
            .attr("transform", function(d, i){
                if (i<total) i++;
                else i = 0;
                return  "rotate("+newAngle*-1+", "+(cfg.w/2)+",0 )"
                })]
            .ease(cfg.easeFunction);

我需要单独操作每个标签并与其各自的轴保持对齐，并且还要使用动态数量的轴。

我非常感谢任何帮助和见解。