fabianmoronzirfas
2/20/2014 - 6:10 PM

index.html

index.html
content_copyfile_download
<!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>