d3intro_ex25

Intro d3js

### Example25 - layouts

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Intro d3js example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      rect:hover {
        cursor: pointer;
      }

svg text {
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <h1>Intro d3js - example25</h1>
    <script type="text/javascript">
    	//Width and height
      var w = 500;
      var h = 300;

//Original data
      var dataset = {
        nodes: [
          { name: "Adam" },
          { name: "Bob" },
          { name: "Carrie" },
          { name: "Donovan" },
          { name: "Edward" },
          { name: "Felicity" },
          { name: "George" },
          { name: "Hannah" },
          { name: "Iris" },
          { name: "Jerry" }
        ],
        edges: [
          { source: 0, target: 1 },
          { source: 0, target: 2 },
          { source: 0, target: 3 },
          { source: 0, target: 4 },
          { source: 1, target: 5 },
          { source: 2, target: 5 },
          { source: 2, target: 5 },
          { source: 3, target: 4 },
          { source: 5, target: 8 },
          { source: 5, target: 9 },
          { source: 6, target: 7 },
          { source: 7, target: 8 },
          { source: 8, target: 9 }
        ]
      };

//Initialize a default force layout, using the nodes and edges in dataset
      var force = d3.layout.force()
                 .nodes(dataset.nodes)
                 .links(dataset.edges)
                 .size([w, h])
                 .linkDistance([50])
                 .charge([-100])
                 .start();

var colors = d3.scale.category10();

//Create SVG element
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
      
      //Create edges as lines
      var edges = svg.selectAll("line")
        .data(dataset.edges)
        .enter()
        .append("line")
        .style("stroke", "#ccc")
        .style("stroke-width", 1);
      
      //Create nodes as circles
      var nodes = svg.selectAll("circle")
        .data(dataset.nodes)
        .enter()
        .append("circle")
        .attr("r", 10)
        .style("fill", function(d, i) {
          return colors(i);
        })
        .call(force.drag);
      
      //Every time the simulation "ticks", this will be called
      force.on("tick", function() {

edges.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; });
      
        nodes.attr("cx", function(d) { return d.x; })
           .attr("cy", function(d) { return d.y; });
  
      });
      </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js