d3cola.js

## d3cola.js
var width= 960; var height = 500;
var color = d3.scale.category20();

var cola = cola.d3adaptor()
            .linkDistance(120)
            .avoidOverlaps(true)
            .size([width,height])

var svg  = d3.select("body").append("svg")
             .attr("width", width)
             .attr("height", height);

d3.json("graph_data.json", function(error, graph) {
  cola.nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = svg.selectAll(".link")
                .data(graph.links)
                .enter().append("line")
                .attr("class", "link");

  var node = svg.selectAll(".node")
                .data(graph.nodes)
                .enter().append("rect")
                .attr("class", "node")
                .attr("width", function (d) { return d.width; })
                .attr("height", function (d) { return d.height; })
                .attr("rx", 5).attr("ry", 5)
                .style("fill", function (d) { return color(1); })
                .call(cola.drag);

  var label = svg.selectAll(".label")
                  .data(graph.nodes)
                  .enter().append("text")
                  .attr("class", "label")
                  .text(function (d) { return d.name; })
                  .call(cola.drag);

   node.append("title")
       .text(function (d) { return d.name; });

  cola.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("x", function (d) { return d.x - d.width / 2; })
        .attr("y", function (d) { return d.y - d.height / 2; });
      label.attr("x", function (d) { return d.x; })
        .attr("y", function (d) {
                      var h = this.getBBox().height;
                      return d.y + h/4;
              });
  });
});

## graph_data.json
{
 "nodes":[
      {"name":"a","width":60,"height":40},
      {"name":"b","width":60,"height":40},
      {"name":"c","width":60,"height":40},
      {"name":"d","width":60,"height":40},
      {"name":"e","width":60,"height":40}
    ],
  "links":[
    {"source":0,"target":1},
    {"source":1,"target":2},
    {"source":2,"target":0},
    {"source":2,"target":3}
  ]
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://marvl.infotech.monash.edu/webcola/cola.v2.min.js"></script>
  </head>
  <body>
  <h1> Force layout constrained </h1>
  <script src="d3cola.js"></script>
  </body>
</html>

## style.css
.node {
  stroke: #fff;
  stroke-width: 1.5px;
  cursor: move;
}

.link {
  stroke: #999;
  stroke-width: 3px;
  stroke-opacity: 1;
}

.label {
  fill: white;
  font-family: Verdana;
  font-size: 25px;
  text-anchor: middle;
  cursor: move;
}

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png