mbildner · December 9, 2013 22:01
diff --git a/d3_graph.html b/d3_graph.html
 <html>
 <head>
 	<style type="text/css">
 		path.link {
 			fill: none;
 			stroke: lime;
 			stroke-width: 2px;
 		}

 		circle {
 			fill: #ccc;
 			stroke: #fff;
 			stroke-width: 1.5px;
 		}

 	</style>

 	<title>Force Graph Demo</title>
 	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>

 </head>
 <body>

 	<script type="text/javascript">
 		var links = [
 			{source: 0, target: 1, type: "friend"},
 			{source: 0, target: 5, type: "friend"},
 			{source: 3, target: 5, type: "friend"},
 			{source: 5, target: 1, type: "friend"},
 			{source: 2, target: 1, type: "friend"},
 			{source: 1, target: 9, type: "friend"},
 			{source: 0, target: 1, type: "friend"},
 			{source: 3, target: 8, type: "friend"},
 			{source: 0, target: 3, type: "friend"},
 			{source: 0, target: 6, type: "friend"}
 		];

 		var nodes = [];

 		for (var i=0; i<10; i++) {
 			var name = 's' + i;
 			nodes.push({name: name});
 		}

 		var dataset = {
 			links : links,
 			nodes : nodes
 		}


 		var h = 1000;
 		var w = 1000;

 		var force = d3.layout.force()
 			.nodes(d3.values(nodes))
 			.links(links)
 			.size([w, h])
 			.linkDistance(200)
 			.charge(-500)
 			.on("tick", tick)
 			.start();

 		var svg = d3.select("body").append("svg")
 			.attr("width", w)
 			.attr("height", h);

 		var r = 15;

 		svg.append("svg:defs").selectAll("marker")
 			.data(["end"])
 			.enter()
 				.append("svg:marker")
 					.attr("id", String)
 					.attr("viewBox", "0 -5 10 10")
 					.attr("refX", r+5)
 					.attr("refY", -1.5)
 					.attr("markerWidth", 6)
 					.attr("markerHeight", 6)
 					.attr("orient", "auto")
 						.append("svg:path")
 						.attr("d", "M0, -5L10, 0L0, 5");

 		var gpath = svg.selectAll("g")
 			.data(force.links())
 				.enter().append("g")

 		// var path = svg.selectAll("g")
 		// 	.data(force.links())
 		// 		.enter().append("g");

 		gpath.append("svg:path")
 				.attr("class", "link")
 				.attr("marker-end", "url(#end)");

 			gpath.append("text")
 				.attr("x", 100)
 				.attr("y", 100)
 				.text(function (d) {
 						return d.type;
 				});
 				


 		var node = svg.selectAll(".node")
 			.data(force.nodes())
 				.enter().append("g")
 					.attr("class", "node")
 					.call(force.drag);


 		node.append("circle")
 			.attr("r", r);


 		node.append("text")
 			.attr("x", 0)
 			.attr("dy", ".35em")
 			.attr("dx", function (d) {
 				return d.name.length * -2;
 			})

 			.text(function (d) { return d.name; });


 		function tick () {
 			svg.selectAll(".link")
 			.attr("d", function (d) {
 				var dx = d.target.x - d.source.x,
 				dy = d.target.y - d.source.y,
 				// dr = Math.sqrt(dx * dx + dy * dy);
 				dr = 0;
 				var line = "M" + 
 					d.source.x + "," + 
 					d.source.y + "A" +
 					dr + "," + dr + " 0 0,1 " +
 					d.target.x + "," + 
 					d.target.y;

 				console.log(line);

 				return line;
 			});


 			node
 				.attr("transform", function (d) {
 					return "translate(" + d.x + "," + d.y + ")"; });
 			}







 	</script>
 </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	path.link {
	fill: none;
	stroke: lime;
	stroke-width: 2px;
	}

	circle {
	fill: #ccc;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	</style>

	<title>Force Graph Demo</title>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.min.js"></script>

	</head>
	<body>

	<script type="text/javascript">
	var links = [
	{source: 0, target: 1, type: "friend"},
	{source: 0, target: 5, type: "friend"},
	{source: 3, target: 5, type: "friend"},
	{source: 5, target: 1, type: "friend"},
	{source: 2, target: 1, type: "friend"},
	{source: 1, target: 9, type: "friend"},
	{source: 0, target: 1, type: "friend"},
	{source: 3, target: 8, type: "friend"},
	{source: 0, target: 3, type: "friend"},
	{source: 0, target: 6, type: "friend"}
	];

	var nodes = [];

	for (var i=0; i<10; i++) {
	var name = 's' + i;
	nodes.push({name: name});
	}

	var dataset = {
	links : links,
	nodes : nodes
	}


	var h = 1000;
	var w = 1000;

	var force = d3.layout.force()
	.nodes(d3.values(nodes))
	.links(links)
	.size([w, h])
	.linkDistance(200)
	.charge(-500)
	.on("tick", tick)
	.start();

	var svg = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	var r = 15;

	svg.append("svg:defs").selectAll("marker")
	.data(["end"])
	.enter()
	.append("svg:marker")
	.attr("id", String)
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", r+5)
	.attr("refY", -1.5)
	.attr("markerWidth", 6)
	.attr("markerHeight", 6)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0, -5L10, 0L0, 5");

	var gpath = svg.selectAll("g")
	.data(force.links())
	.enter().append("g")

	// var path = svg.selectAll("g")
	// .data(force.links())
	// .enter().append("g");

	gpath.append("svg:path")
	.attr("class", "link")
	.attr("marker-end", "url(#end)");

	gpath.append("text")
	.attr("x", 100)
	.attr("y", 100)
	.text(function (d) {
	return d.type;
	});



	var node = svg.selectAll(".node")
	.data(force.nodes())
	.enter().append("g")
	.attr("class", "node")
	.call(force.drag);


	node.append("circle")
	.attr("r", r);


	node.append("text")
	.attr("x", 0)
	.attr("dy", ".35em")
	.attr("dx", function (d) {
	return d.name.length * -2;
	})

	.text(function (d) { return d.name; });


	function tick () {
	svg.selectAll(".link")
	.attr("d", function (d) {
	var dx = d.target.x - d.source.x,
	dy = d.target.y - d.source.y,
	// dr = Math.sqrt(dx * dx + dy * dy);
	dr = 0;
	var line = "M" +
	d.source.x + "," +
	d.source.y + "A" +
	dr + "," + dr + " 0 0,1 " +
	d.target.x + "," +
	d.target.y;

	console.log(line);

	return line;
	});


	node
	.attr("transform", function (d) {
	return "translate(" + d.x + "," + d.y + ")"; });
	}







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