D3.js - 围绕一个点旋转svg文本

Question

如何在圆环图中旋转带有矩形的文字，我已尝试在text中传递d3.timer选择器，但这会更改text当前状态。

text将始终位于矩形内。

 var start = Date.now()
 d3.timer(function() {
   var angle = (Date.now() - start) * .3,
     rotate = function(d,i) {
        return "rotate(" + angle / 80 + ")";
    };
   wheel.selectAll("rect").attr("transform", rotate);
 });

这是fiddle

Answer 1

将旋转应用于包含文本和rect的<g>组。请注意，您将旋转变换添加到现有变换矩阵。

d3.timer(function() {       
    rect.each(function(){   
      var newTransform = this.getCTM().rotate(2), //Try with adding a fixed angle of rotation
      svgMatrix =  this.ownerSVGElement.createSVGTransformFromMatrix(newTransform);
      this.transform.baseVal.initialize(svgMatrix);
   });    
});

以下是更新后的jsFiddle。希望这会有所帮助。