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

D3.js - Rotate svg text around a point

本文关键字：一个 旋转 svg 文本 js- D3      更新时间：2023-09-26

如何在圆环图内用矩形旋转文本，我曾尝试在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);
 });

这是小提琴

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

相关文章：