Old school D3 from simpler times

All examples By author By category About

lmeyerov

Full window Github gist

force demo

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <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; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>

<script>

var w = 960, h = 500;
    var n = 10;
    var ANCHORS = 3;

var vis = d3.select("body").append("svg:svg")
      .attr("width", w)
      .attr("height", h);
    
    var nodes = d3.range(n).map(function (d) { return {} });
    var links = d3.range(n * 3).map(function (d) {
      return {
        source: d % n,
        destination: (d * 3) % n
      }
    });
    
    var force = d3.layout.force()
      .nodes(nodes).links(links)
      .gravity(.05).distance(100).charge(-100).size([w, h])
      .start();

var link = vis.selectAll("line.link")
        .data(links)
        .enter().append("svg:line")
        .attr("class", "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; });

var node_drag = d3.behavior.drag()
        .on("dragstart", function () { force.stop(); })
        .on("drag", function (d, i) {
            d.px += d3.event.dx;
            d.py += d3.event.dy;
            d.x += d3.event.dx;
            d.y += d3.event.dy; 
            tick();
        })
        .on("dragend", function (d, i) {
          d.fixed = true;
          tick();
          force.resume();
        });
    
     var node = vis.selectAll("g.node")
        .data(nodes)
      .enter().append("svg:g")
        .attr("class", "node")
        .call(node_drag);

node.append("svg:image")
        .attr("class", "circle")
        .attr("xlink:href", "https://github.com/favicon.ico")
        .attr("x", "-8px")
        .attr("y", "-8px")
        .attr("width", "16px")
        .attr("height", "16px");

node.append("svg:text")
        .attr("class", "nodetext")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.name });

force.on("tick", tick);

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>
</body>

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