modification of d3network graph

d3network_mod.html

 <style>
.link {
stroke: #666;
opacity: 1;
stroke-width: 1.5px;
}

.node circle {
stroke: #fff;
opacity: 1;
stroke-width: 1.5px;
}

.node:not(:hover) .nodetext {
display: none;
}

text {
font: 7px serif;
opacity: 1;
pointer-events: none;
}
</style>

<script src=http://d3js.org/d3.v3.min.js></script>

<script>
 var nodes = [ { "name" : "Bart ", "group" : 5 }, { "name" : "Lisa ", "group" : 4 }, { "name" : "Marge ", "group" : 9 }, { "name" : "Homer ", "group" : 1 }, { "name" : "Smithers ", "group" : 5 }, { "name" : "Maggie ", "group" : 5 }];
 var links = [ { "source" : 0, "target" : 4, "value" : 1 }];
 var width = 800
height = 800;

var color = d3.scale.category20();

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(50)
.charge(-120)
.on("tick", tick)
.start();

//var svg = d3.select("body").append("svg")
var svg = d3.select("#networkPlot").append("svg")
.attr("width", width)
.attr("height", height);

var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });


//added tooltip
var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("color", "black")
	.style("background-color", "#FEFCFF")
	.style("border", "solid 1 #726E6D")
	.style("visibility", "hidden");

	
//updated mouseover and mouseout, added mousemove	
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.style("fill", function(d) { return color(d.group); })
.style("opacity", 1)
.on("mouseover", function(d) {
	 tooltip.html(d.name)
	 .style("visibility", "visible")
	 .attr("cursor", "hand");
 })
 .on("mousemove", function(){
	 tooltip.style("top", (d3.event.pageY - 10)+"px")
	 .style("left",(d3.event.pageX + 10)+"px");
 })
 .on("mouseout", function(){
	tooltip.style("visibility", "hidden");
 })
.call(force.drag);

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

function tick() {
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; });

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


</script>