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

Question

我如何在Doughnut图表内旋转带有矩形的文本，我尝试通过在d3.timer传递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);
 });

这是小提琴

Answer 1

将旋转应用于包含文本和矩形的<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 。 希望这可以帮助。