Transform tween

by christopheviau

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<svg>

CSS

rect{fill:skyblue}

JavaScript

d3.select('svg')
	.attr({
        width: 200,
        height: 200
     })
    .selectAll('rect')
    .data([90])
    .enter().append('rect')
    .attr({
        width: 25,
        height: 650,
	    transform: 'rotate(0, 0, 0)'
     })
    .transition()
	.duration(2000)
    .call(customTween, 'transform', function(d, i){ return 'rotate('+d+' 100, 100)';});


function customTween(transition, name, value) {
  transition.attrTween(name, function(d, i) {
    return d3.interpolateString(this.getAttribute('transform'), value(d, i));
  });
}