SVG transform interpolation

An example of interpolating only the rotate component of an SVG transform.

<!DOCTYPE html>
<style>
circle {
  fill: none;
  stroke: #000;
}
</style>
<body>
<script src="https://d3js.org/d3.v2.min.js"></script>
<script>
var width = 400,
    height = 400;

var svg = d3.select("body").selectAll("svg")
    .data([0, 1])
  .enter().append("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g")
    .attr("transform", "translate(200,200)");

g.append("circle")
    .attr("r", 100);

var text = g.append("text")
    .attr("transform", "rotate(180)translate(0,-100)")
    .attr("dy", "-.3em")
    .text("a");

text.filter(function(d) { return !d; }).transition()
    .duration(1000)
    .attr("transform", "rotate(360)translate(0,-100)");

text.filter(function(d) { return d; }).transition()
    .duration(1000)
    .attrTween("transform", function() {
      var rotate0 = this.transform.baseVal.getItem(0).angle,
          interpolate = d3.interpolateNumber(rotate0, 360);
      return function(t) {
        return "rotate(" + interpolate(t) + ")translate(0,-100)";
      };
    });
</script>

Modified http://d3js.org/d3.v2.min.js to a secure url

https://d3js.org/d3.v2.min.js