Question

我在这个plunker中摆弄D3.js。它主要做我想要的，但我注意到一个小的不一致。

这个想法是第二个滑块旋转容器中的SVG元素。由于其中的元素实际上是text元素，我希望它们显示 unrotated ，因此，我使用滑块中的对称值将transform: rotate应用于它们

虽然，我注意到，通过这样做，text元素不会围绕它们的中心旋转，而是绕着它们的左上角角落（我想）。当您观察边缘附近的一个点并看到如何在旋转时对边缘进行转置时，这几乎是可见的。

我尝试在这些元素上设置text-anchor和alignment-baseline middle，希望它会偏移text路径，但显然它不会改变旋转时它们转动的点。

此外，如果我尝试使用轴心点坐标设置rotate，它会通过对元素应用一些translate来完全切换效果，我无法弄清楚。< / p>

不确定getBBox()是否能帮助我解决这个问题，但我认为可能会将这些点的宽度/高度减去一半。这看起来有点令人费解，我希望能够更容易/更优雅/更清洁。

有什么想法吗？

Answer 1

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

基本上，我使用此函数的返回值作为transform: rotate轴心点坐标，并且处理了偏移。示例（上述plunker的第99行， rotate（）函数）：

(...)
var textElement = d3.select(this);
return justTranslate+"rotate("+ -value+ textElement.centroid() +")";
(...)

希望这可以帮助任何有同样问题的人。

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

未捕获的TypeError：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 +")";
});

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

1 个答案: