d3.timer

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="test"></div>
<div id="btns">
    <div id="stopdiv"><button id="stop">STOP!</button></div>
</div>

CSS

.g_mainsvg {background: #ddd;border: 1px solid #00f;}
	.object_circle {fill: #2ca02c;stroke:#028;stroke-width:2;}

JavaScript

var C_WIDTH = 300,
    C_HEIGHT = 200;

var width = C_WIDTH;
var height = C_HEIGHT;
var timer_ret_val = false;

var mainsvg = d3.select("#test")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "g_mainsvg");

var circledata = d3.map();
circledata.set('x', 0);
circledata.set('y', C_HEIGHT/2);

var circleg = mainsvg.selectAll("g.blob")
    .data([circledata])
    .enter()
    .append("svg:g")
    .attr("class", "blob")
    .attr("transform", function(d) {return "translate(" + C_WIDTH/2 + "," + C_HEIGHT/2 + ")";});

var t_circle_object = circleg
    .append("circle")
    .attr("cx", function(d) { return 0; })
    .attr("cy", function(d) { return 0; })
    .attr("r", function(d) {return 30; })
    .attr("class", "object_circle")
    .style("fill", "#0000dd")
    .style("fill-opacity", "0.75");

var stopdiv=d3.select("#stopdiv");
stopdiv.on("click", function()	{
    timer_ret_val = !timer_ret_val;
});

var duration = 1000, targetX = 300,last = 0, t=0;
d3.timer(function(elapsed) {
    t = (t + (elapsed - last) / duration) % 1;
    last = elapsed;
    update();
    return timer_ret_val;
});

function update(elapsed){
    var t_x = circledata.get('x');
    t_x = targetX * t;
    
    mainsvg.selectAll("g.blob")
        .attr("transform", function(d) {return "translate(" + t_x + "," + d.get('y') + ")";});
    
    circledata.set('x', t_x);		
}