D3 network

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

CSS

.link {
  fill: none;
  stroke: #ccc;
  opacity: 0.4;
  stroke-width: 1.5px;
}
.node circle {
  stroke: #fff;
  opacity: 0.8;
  stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
  display: none;
}
text {
  font: 12px serif;
  opacity: 0.8;
  pointer-events: none;
}
div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  color: black;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

JavaScript

var text = svg.append("svg:g").selectAll("g")
  .data(nodes)
  .enter().append("svg:g");

text.append("svg:text")
  .attr("x", "-1em")
  .attr("y", ".31em")
  .style("font-size", "13px")
  .text(function(d) {
    return d.name;
  });


function mouseover() {
  d3.select(this).select("circle").transition()
    .duration(750)
    .attr("r", 9)
  d3.select(this).select("text").transition()
    .duration(750)
    .style("stroke-width", ".5px")
    .style("font", "22.8px serif")
    .style("opacity", 1);
}

function mouseout() {
  d3.select(this).select("circle").transition()
    .duration(750)
    .attr("r", 4.5)
  d3.select(this).select("text").transition()
    .duration(750)
    .style("font", "12px serif")
    .style("opacity", 0.8);
}

d3.select(self.frameElement).style("height", height + "px");