Transform tween
HTML
<script src="http://d3js.org/d3.v3.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
CSS
div{background-color:skyblue}
JavaScript
d3.select('body')
.selectAll('div')
.data([400])
.enter().append('div')
.style({
width: '50px',
height: '200px'
})
.transition()
.call(customStyleTween, 'transform', function(){ return 'translate(0px, 0px)';})
.transition()
.call(customStyleTween, 'transform', function(d, i){ return 'translate('+d+'px, 0px)';});
function customStyleTween(transition, name, value) {
transition.styleTween(name, function(d, i) {
return d3.interpolateString(this.style[name], value(d, i));
});
}