Javascript SVG：在父变换上反转子旋转

我在这里摆弄D3.js。 它基本上满足了我的需求，但我注意到了一点不一致

其思想是第二个滑块旋转容器中的SVG元素。由于其中的元素实际上是

文本

元素，我希望它们不旋转显示，因此，我使用滑块中的对称值对它们应用了

变换：旋转

尽管如此，我注意到通过这样做，

text

元素不会围绕其中心旋转，而是围绕其左上角旋转（我认为）。当您观察边附近的点并查看在旋转时如何转置边时，这一点最为明显

我已经尝试在这些元素上将

文本锚定

和

对齐基线

设置为

中间

，希望它会偏移

文本

路径，但显然它不会改变旋转时它们围绕的点

此外，如果我尝试使用轴心点坐标设置

旋转

，它会通过对元素应用一些我无法理解的

平移

，使效果完全不稳定

不确定

getBBox（）

是否能在这方面对我有所帮助，但我考虑过可能将这些点的宽度/高度偏移一半。这看起来有点复杂，我希望有一个更简单/更优雅/更干净的解决方案

---

有什么想法吗？

嗯，这很尴尬。在我发布了这个问题之后，我在D3.js文档中找到了答案：

基本上，我使用该函数的返回值作为

变换：旋转
轴点坐标，并考虑偏移。示例（上述plunker的第99行，rotate（）函数）：

希望这能帮助有同样问题的人

编辑：出于某种原因，Chrome的控制台显示：

未捕获类型错误：textElement.centroid不是函数

但这种行为正是我想要的。不知道为什么

EDIT2:最终将上述答案更改为
getBBox（）
方法，因为滑块移动因上一次编辑错误而停止

将其更改为：

text.attr("transform", function(d){
    var textElement = d3.select(this);
    var current = textElement.attr("transform");
    var alreadyRotated = current.indexOf('rotate');
    var justTranslate = current.substring(0, alreadyRotated != -1 ? alreadyRotated : current.length);
    var bbox = textElement.node().getBBox();
    var point = [bbox.x + 0.5*bbox.width, bbox.y + 0.5*bbox.height];
    return justTranslate+"rotate("+ -value +" "+ point +")";
});

text.attr("transform", function(d){
    var textElement = d3.select(this);
    var current = textElement.attr("transform");
    var alreadyRotated = current.indexOf('rotate');
    var justTranslate = current.substring(0, alreadyRotated != -1 ? alreadyRotated : current.length);
    var bbox = textElement.node().getBBox();
    var point = [bbox.x + 0.5*bbox.width, bbox.y + 0.5*bbox.height];
    return justTranslate+"rotate("+ -value +" "+ point +")";
});