October 31, 2011 01:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
 <title>Mouse Over Text Example</title>
 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
 </head>
 <body>

 <script language="javascript">
 var data = [
      {name:'bob',  location: "Texas"},
      {name:'jane', location: "Ohio"},
      {name:'sue',  location: "Colorado"},
      {name: 'tom', location: "Florida"}
 ];

 var svg = d3.select("body") 
 		.append("svg:svg")
 		.attr("viewBox", "-512 -370 1024 768")
 		.attr("preserveAspectRatio", "xMinYMin meet");		

 	svg.style("opacity", 1e-6)
 		.transition()
 		.duration(800)
 		.style("opacity", 1);

 var force = d3.layout.force().nodes(data);
 startForce();
 function startForce(){
 	force
 		.links([])
 		.gravity(0.035)
 		.charge(-200)
 		.start();
 }

 var g = svg.selectAll("group")
 		.data(data)
 		.enter().append("svg:g")
 		.attr("class", "data")
 		.call(force.drag)
 		.on("mouseover", function(d, i){svg.select("circles").style("stroke-width", 1).style("stroke", "red");});
 		
 var circles = g.append("svg:circle")
 		.attr("r", 30)
 		.style("fill", "green")
 		.attr("fill-opacity", .3)
 		.style("stroke", "grey")
 		.style("stroke-width", 0.000001)
 		.on("mouseover", function(){d3.select(this).style("stroke-width", 1).style("stroke", "red");})
 		.on("mouseout", function(){d3.select(this).style("stroke-width", 0.000001)})

 var text = g.append("svg:text")
      	.attr("class", "nodeText")
    	.attr("text-anchor", "middle")
 		.text(function(d) {return d.name;});

 force.on("tick", function(e) {
 	var k = 0 * e.alpha;
 	data.forEach(function(o, i) {
    	o.x += i & 0 ? k : -k;
    	o.y += i & 0 ? k : -k;
 	});
 	
 	circles.attr("cx", function(d) {return d.x;});
 	circles.attr("cy", function(d) {return d.y;});
 	text.attr("dx", function(d) {return d.x;});
 	text.attr("dy", function(d) {return d.y;});

 });

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	<title>Mouse Over Text Example</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
	</head>
	<body>

	<script language="javascript">
	var data = [
	{name:'bob', location: "Texas"},
	{name:'jane', location: "Ohio"},
	{name:'sue', location: "Colorado"},
	{name: 'tom', location: "Florida"}
	];

	var svg = d3.select("body")
	.append("svg:svg")
	.attr("viewBox", "-512 -370 1024 768")
	.attr("preserveAspectRatio", "xMinYMin meet");

	svg.style("opacity", 1e-6)
	.transition()
	.duration(800)
	.style("opacity", 1);

	var force = d3.layout.force().nodes(data);
	startForce();
	function startForce(){
	force
	.links([])
	.gravity(0.035)
	.charge(-200)
	.start();
	}

	var g = svg.selectAll("group")
	.data(data)
	.enter().append("svg:g")
	.attr("class", "data")
	.call(force.drag)
	.on("mouseover", function(d, i){svg.select("circles").style("stroke-width", 1).style("stroke", "red");});

	var circles = g.append("svg:circle")
	.attr("r", 30)
	.style("fill", "green")
	.attr("fill-opacity", .3)
	.style("stroke", "grey")
	.style("stroke-width", 0.000001)
	.on("mouseover", function(){d3.select(this).style("stroke-width", 1).style("stroke", "red");})
	.on("mouseout", function(){d3.select(this).style("stroke-width", 0.000001)})

	var text = g.append("svg:text")
	.attr("class", "nodeText")
	.attr("text-anchor", "middle")
	.text(function(d) {return d.name;});

	force.on("tick", function(e) {
	var k = 0 * e.alpha;
	data.forEach(function(o, i) {
	o.x += i & 0 ? k : -k;
	o.y += i & 0 ? k : -k;
	});

	circles.attr("cx", function(d) {return d.x;});
	circles.attr("cy", function(d) {return d.y;});
	text.attr("dx", function(d) {return d.x;});
	text.attr("dy", function(d) {return d.y;});

	});

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