<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?2.1.3"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?2.1.3"></script>
<style type="text/css">
.link {
stroke: #ccc;
}
.nodetext {
pointer-events: none;
font: 10px sans-serif;
}
</style>
</head>
<body>
<script type="text/javascript">
var w = 960,
h = 500;
var force = d3.layout.force()
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h]);
var nodes = force.nodes(),
links = force.links();
var vis = d3.select("body").append("svg:svg")
.attr("width", w)
.attr("height", h);
force.on("tick", function() {
vis.selectAll("g.node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
vis.selectAll("line.link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
});
function restart() {
var link = vis.selectAll("line.link")
.data(links, function(d) { return d.source.id + "-" + d.target.id; });
link.enter().insert("svg:line", "g.node")
.attr("class", "link");
link.exit().remove();
var node = vis.selectAll("g.node")
.data(nodes, function(d) { return d.id;});
console.log("restart");
console.log(nodes);
console.log(links);
var nodeEnter = node.enter().append("svg:g")
.attr("class", "node")
.call(force.drag);
nodeEnter.append("svg:image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
nodeEnter.append("svg:text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.id });
node.exit().remove();
force.start();
}
// Add three nodes and three links.
function step1() {
console.log("step 1");
var a = {id: 0}, b = {id: 1}, c = {id: 2};
nodes.push(a, b, c);
links.push({source: a, target: b}, {source: a, target: c}, {source: b, target: c});
restart();
}
// Remove node bbb and associated links.
function step2() {
console.log("step 2");
//var node;
for(i=0;i<=20;i++){
var a = {id: i};
nodes.push(a);
links.push({source: a, target: Math.round(Math.random()*10)});
}
console.log(nodes);
restart();
}
function step3() {
//d3.select(".node").remove();
console.log("step 3");
//console.log(nodes);
console.log(nodes);
console.log(links);
for(i=0;i<=nodes.length;i++){
console.log("removed: "+nodes[i]);
nodes.splice(i);
}
for(i=0;i<=links.length;i++){
links.splice(i);
}
console.log(nodes);
console.log(links);
restart();
}
restart();
setTimeout(step1, 500);
setTimeout(step2, 5000);
setTimeout(step3, 7000);
setTimeout(step2, 8000);
</script>
</body>
</html>