How to reposition nodes and translate them to another foci? - d3.js

Question

im new to D3 and love it so far, I was playing around with multi foci force layout and got a part of what I want to do working fine, What I would like to know if its possible to reposition some of the node based on a time scale.
What I meant by that is currently what you see is 6(orange), 5(blue) and 3 (green) nodes in the fiddle I created, So I want them to position themselves by translating towards each other i.e on day two data could be 5(orange), 6(blue) and 4(green), that means one orange node moves to green cluster.
var data = [
{"id": 0, "name": "x", "r":5 },
{"id": 0, "name": "x", "r":5 },
{"id": 0, "name": "x", "r":5 },
{"id": 0, "name": "x", "r":5 },
{"id": 0, "name": "x", "r":5 },
{"id": 1, "name": "y", "r":5 },
{"id": 1, "name": "y", "r":5 },
{"id": 1, "name": "y", "r":5 },
{"id": 1, "name": "y", "r":5 },
{"id": 1, "name": "y", "r":5 },
{"id": 1, "name": "y", "r":5 },
{"id": 2, "name": "z", "r":5 },
{"id": 2, "name": "z", "r":5 },
{"id": 2, "name": "z", "r":5 },
];
var width = window.innerWidth,
height = 410;
var fill = d3.scale.category10();
var nodes = [], labels = [],
foci = [{x: 0, y: 10}, {x: 100, y: 210}, {x: 600, y: 210}];
var svg = d3.select("body").append("svg")
.attr("width", "100%")
.attr("height", height)
//.attr("domflag", '');
var force = d3.layout.force()
.nodes(nodes)
.links([])
.charge(-10)
//.chargeDistance(100)
.gravity(0.1)
.friction(0.8)
.size([width, height])
.on("tick", tick);
//var node = svg.selectAll("circle");
var node = svg.selectAll("g");
var counter = 0;
function tick(e) {
var k = .1 * e.alpha;
// Push nodes toward their designated focus.
nodes.forEach(function(o, i) {
o.y += (foci[o.id].y - o.y) * k;
o.x += (foci[o.id].x - o.x) * k;
});
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
var timer = setInterval(function(){
if (nodes.length > data.length-1) { clearInterval(timer); return;}
var item = data[counter];
nodes.push({id: item.id, r: item.r, name: item.name});
force.start();
node = node.data(nodes);
var n = node.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style('cursor', 'pointer')
.on('mousedown', function() {
var sel = d3.select(this);
//``sel.moveToFront();
})
.call(force.drag);
n.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return fill(d.id); })
n.append("text")
.text(function(d){
return d.name;
})
.style("font-size", function(d) {
return Math.min(2 * d.r, (2 * d.r - 8) / this.getComputedTextLength() * 16) + "px";
})
.attr("dy", ".35em")
counter++;
}, 100);
node {
stroke-width: 1.5px;
}
.node:hover circle {
fill: grey !important;
}
text {
font: 18px 'Open Sans', sans-serif;;
text-anchor: middle;
pointer-events: none;
fill: white;
}
circle {
fill: #ccc;
stroke: white ;
stroke-width: 2px;
}
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<h2>D3.js Multi-Foci Force layout </h2>
I have created a fiddle here.
What I want to know is how to translate nodes to another cluster and format data for looping through time.
I'm using D3 V3 for development.