D3 Examples - Force layout with tooltips

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.1.3/d3.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.1.3/d3.geom.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.1.3/d3.layout.js"></script>
    <style type="text/css">
​
.link {
  stroke: #ccc;
}
​
    </style>
  </head>
  <body>
    <script type="text/javascript">
​
var w = 960,
    h = 500
​
var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);
​
d3.json("readme.json", function(json) {
    var force = d3.layout.force()
        .nodes(json.nodes)
        .links(json.links)
        .gravity(.05)
        .distance(100)
        .charge(-100)
        .size([w, h])
        .start();
​
    var link = vis.selectAll("line.link")
        .data(json.links)
      .enter().append("svg:line")
        .attr("class", "link");
​
    var node = vis.selectAll("g.node")
        .data(json.nodes)
      .enter().append("svg:g")
        .attr("class", "node")
        .call(force.drag);
​
    node.append("svg:image")
        .attr("class", "circle")
        .attr("xlink:href", "https://avatars1.githubusercontent.com/u/715494?s=140")
        .attr("x", "-8px")
        .attr("y", "-8px")
        .attr("width", "16px")
        .attr("height", "16px");
​
    node.append("svg:title")
        .text(function(d) { return d.name; });
​
    force.on("tick", function() {
      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>
  </body>
</html>
    