TomDemeranville/README.md

## README.md

      
    Raw
  

              README.md
            
          
    ##simple d3.js graph
###add nodes with a click.
(cheers to mike bostock!)

  
## index.html
<!DOCTYPE html>
<html>
<head>
<title>Simple d3.js graph</title>
<meta charset="utf-8">
<style>
.link {
  stroke: #000;
  stroke-width: 1.5px;
}

.node {
  fill: #000;
  stroke: #fa0;
  stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>

//need to implement callbacks etc for json node loading...
var getRemoteNode = function(id){
  var newnode = {"id":id};
	return newnode;
}

//expand node
var nodeclick = function(d){
	if (d.fill == null)
		d.fill = "red";
	else if (d.fill == "red")
		d.fill = "blue";
	else if (d.fill == "blue")
		d.fill = "green";

	//add a new node+link
	var newnode = getRemoteNode(Math.random()*100);
	nodes.push(newnode);
	links.push({"source":d,"target":newnode});
	restart();
}

//update vis
var tick = function(){
	node.attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });

 	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; });

}

//data changed?  restart sim.
function restart() {
  link = link.data(links);

  //new links
  link.enter().insert("line", ".node")
      .attr("class", "link");

  link.exit().remove();

  //update nodes
  node = node.data(nodes).attr("style",function(d){console.log(d);return "fill:"+d.fill;});

  //new nodes
  node.enter().insert("circle", ".cursor")
      .attr("class", "node")
      .attr("r", 10)
      .on("click",nodeclick)
      .call(force.drag);

  //nodes that no longer exist
  node.exit().remove();

  force.start();
}

//======================================================

//create a svg
var width = 800, height = 400;
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//create a single start node and no links
var nodes = [{"id":"startnode"}];
var links = [];

//make a force layout
var force = d3.layout.force()
    .nodes(nodes)
    .links(links)
    .size([width, height])
    .linkDistance(40)
    .charge(-60)
    .on("tick", tick);

//add the nodeholder
var node = svg.selectAll(".node").data(nodes);
//create linkholder
var link = svg.selectAll(".link").data(links);

//start sim
restart();

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple d3.js graph</title>
	<meta charset="utf-8">
	<style>
	.link {
	stroke: #000;
	stroke-width: 1.5px;
	}

	.node {
	fill: #000;
	stroke: #fa0;
	stroke-width: 1.5px;
	}
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>

	//need to implement callbacks etc for json node loading...
	var getRemoteNode = function(id){
	var newnode = {"id":id};
	return newnode;
	}

	//expand node
	var nodeclick = function(d){
	if (d.fill == null)
	d.fill = "red";
	else if (d.fill == "red")
	d.fill = "blue";
	else if (d.fill == "blue")
	d.fill = "green";

	//add a new node+link
	var newnode = getRemoteNode(Math.random()*100);
	nodes.push(newnode);
	links.push({"source":d,"target":newnode});
	restart();
	}

	//update vis
	var tick = function(){
	node.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });

	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; });

	}

	//data changed? restart sim.
	function restart() {
	link = link.data(links);

	//new links
	link.enter().insert("line", ".node")
	.attr("class", "link");

	link.exit().remove();

	//update nodes
	node = node.data(nodes).attr("style",function(d){console.log(d);return "fill:"+d.fill;});

	//new nodes
	node.enter().insert("circle", ".cursor")
	.attr("class", "node")
	.attr("r", 10)
	.on("click",nodeclick)
	.call(force.drag);

	//nodes that no longer exist
	node.exit().remove();

	force.start();
	}

	//======================================================

	//create a svg
	var width = 800, height = 400;
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	//create a single start node and no links
	var nodes = [{"id":"startnode"}];
	var links = [];

	//make a force layout
	var force = d3.layout.force()
	.nodes(nodes)
	.links(links)
	.size([width, height])
	.linkDistance(40)
	.charge(-60)
	.on("tick", tick);

	//add the nodeholder
	var node = svg.selectAll(".node").data(nodes);
	//create linkholder
	var link = svg.selectAll(".link").data(links);

	//start sim
	restart();

	</script>
	</body>
	</html>