CODEWITHSUNDEEP
javascriptd3.js
ravins
ravins

Reputation: 147

D3.js - Rotate svg text around a point

How can I rotate text with rectangle inside a Donut chart, I've tried by passing text selector in d3.timer but this changes text current state.

text will be always inside rectangle.

 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);
 });

Here is fiddle

Upvotes: 0

Views: 708

Answers (1)

Gilsha
Gilsha

Reputation: 14591

Apply the rotation to the <g> group which contains the text and rect. Note that you will have add the rotate transformation to the existing transformation matrix.

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);
   });    
});

Here is the updated jsFiddle. Hope this helps.

Upvotes: 3

Related Questions