index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body, html {
margin: 0;
}
.foci-1, .foci-2{
display: block;
fill: green;
}
.group-1 {
fill: red;
}
.group-2 {
fill: blue;
}
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var w = 800
, h = 500
, svg = d3.select('body').append('svg')
.attr({ width: w, height: h })
, Force = function(nodes, links){
return d3.layout.force()
.nodes(nodes)
.links(links)
.gravity(0)
.size([w, h])
.linkDistance(0)
.linkStrength(0.1)
.friction(0.9)
.charge(function(d, i){ return d.charge })
}
, Nodes = function(num, id, name){
return d3.range(num).map(function(d){
return {
id : id
, x : Math.random() * w
, y : Math.random() * h
, charge : -10
, name : name
}
})
}
, Foci = function(x, y, name){
return { x : x, y : y, charge : 0, fixed : true, name : name }
}
, Links = function(nodes, foci){
return nodes.map(function(node){
return { source : node, target : foci }
})
}
, fill = function(d){
if(d) return 'red'
else return 'blue'
}
, nodes1 = Nodes(100, 0, 'group-1')
, nodes2 = Nodes(1, 1, 'group-2')
, foci1 = Foci(w / 2, h / 2, 'foci-1')
, foci2 = Foci(w / 2 + 200, h / 2, 'foci-2')
, links1 = Links(nodes1, foci1)
, links2 = Links(nodes2, foci2)
, all = nodes1.concat(nodes2).concat([foci1, foci2])
, force = Force(all, links1.concat(links2))
force.on('tick', function(){
force.alpha(0.1)
svg.selectAll('circle')
.attr('cx', function(d){ return d.x })
.attr('cy', function(d){ return d.y })
})
svg.selectAll('circle')
.data(all)
.enter().append('circle')
.attr({
cx: function(d) { return d.x }
, cy: function(d){ return d.y }
, r: 4
, 'class': function(d){ return d.name }
})
.style({
stroke: 'white'
, 'stroke-width': 1
})
force.start()
d3.select('.foci-2')
.transition()
.ease('cubic-in-out')
.duration(2000)
.tween('dataTween', function(d){
var ix = d3.interpolate(d.x, w / 2)
var iy = d3.interpolate(d.y, h / 2)
return function(t){
d.x = d.px = ix(t)
d.y = d.py = iy(t)
}
})
setTimeout(function(){
var nodes = nodes1.concat(nodes2)
var links = Links(nodes, foci1)
force.links(links)
}, 4000)
</script>
</body>
</html>