D3 Examples - graph ex

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
    .node  {
        fill: #e80080;
        stroke: #404040;
        stroke-width: 2px;
    }
    /*add css for links*/
    
    .link {
        fill: none;
        stroke: #404040;
        stroke-width: 2.72px;
    }
  
     .link-mouseover {
        fill: none;
        stroke: #666666;
        stroke-width: 5px;
}
  
    text {
        font: 10px sans-serif;
        pointer-events: none;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
​
      
// setup links
var links = [
    { source: "D3", target:"Adron Hall" },
    { source: "D3", target:"Alex Korban" },
    { source: "D3", target:"Ben Sullins" },
    { source: "D3", target:"Bernard Avenatti" },
    { source: "D3", target:"Dan Appleman" },
    { source: "D3", target:"Douglas Starnes" },
    { source: "D3", target:"Fernando Medina Corey" },
    { source: "D3", target:"Hendrik Swanepoel" },
    { source: "D3", target:"Jake Trent" },
    { source: "D3", target:"James Wilson" },
    { source: "D3", target:"Matt Baker" },
    { source: "D3", target:"Miguel Castro" },
    { source: "D3", target:"Simon Hughes" },
    { source: "D3", target:"Tommy Ryan" },
    { source: "D3", target:"Walter Quesada" },
    { source: "D3", target:"Wes Higbee" },
    { source: "D3", target:"YK Sugishita" },
];
​
      
    // create empty nodes array
    var nodes = {};
    
    // compute nodes from links data
links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});
  
// set a width and height for our SVG
var width = 640,
    height = 480,
    margin = 100;
​
    var force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(links)
        .size([width, height])
        .linkDistance(175)
        .charge(-425)
        .on("tick", tick)
        .start();
      
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);
​
    var link = svg.selectAll(".link")
            .data(force.links())
            .enter().append("line")
          .attr("class", "link")
            .on("mouseover", linkMouseOver)
                .on("mouseout", linkMouseOut);; 
                
    var node = svg.selectAll(".node")
        .data(force.nodes())
        .enter().append("circle", "g")
        .attr('class', 'node')
        .attr('r', width * 0.03)
            .call(force.drag);
        
        node.append("circle")
        .attr("r", 8)
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);
​
        node.append("text")
        .attr("x", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.name; });
      
    // what to do 
    function tick(e) {
        
        node.attr('cx', function(d) { return d.x; })
            .attr('cy', function(d) { return d.y; });
            
            
        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; });
        
    }
    
function mouseover() {
  d3.select(this).transition()
      .duration(500)
      .attr("r", 16);
}
​
function mouseout() {
  d3.select(this).transition()
      .duration(500)
      .attr("r", 8);
}
  
function linkMouseOver() {
  d3.select(this)
    .attr("class", "link-mouseover");
}
​
function linkMouseOut() {
  d3.select(this)
    .attr("class", "link");
}
​
​
</script>
​
    