D3.js

Question

如何在甜甜圈图中旋转带有矩形的文本，我尝试通过在 d3.timer 中传递 text 选择器，但这会改变 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

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

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

D3.js - Rotate svg text around a point

javascript