ghamarian · September 2, 2018 21:30
diff --git a/smallnonoverlappinggraph.html b/smallnonoverlappinggraph.html
 <!DOCTYPE html>

 <html lang="en">
 <head>
    <meta charset="utf-8" />
    <title>Non-overlapping Layout</title>
    <style>

 .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;
 }

 </style>
 </head>
 <body>
    <a href="../index.html">cola.js home</a>
    <h1>Disconnected graph with non-overlap constraints</h1>
 <script src="../extern/d3v4.js"></script>
 <script src="../cola.min.js"></script>
 <script>
    var width = 960,
        height = 500;

    var color = d3.scaleOrdinal(d3.schemeCategory20);

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

    var cola = cola.d3adaptor(d3)
    .linkDistance(120)
        .avoidOverlaps(true)
    .size([width, height]);
    //
    // cola
    // .nodes(graph.nodes)
    // .links(graph.links)
    // .constraints(graph.constraints)
    // .symmetricDiffLinkLengths(5)
    // .avoidOverlaps(true)
    // .start(10,15,20);

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

    d3.json("graphdata/fivenodesdisconnected.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
        .nodes(graph.nodes)
        .links(graph.links)
        // .constraints(graph.constraints)
        // .symmetricDiffLinkLengths(5)
        .avoidOverlaps(true)
        .start(10,15,20);

        // 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;
        //          });
        // });
    });

 </script>
    <p>Since node 'e' is not connected to the rest of the graph, it does not influence the layout of the connected component
        except through constraints.  In this case, we generate constraints to prevent node boxes from overlapping.  Try dragging 'e'
        so that it collides with the other nodes.
    </p>
    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-63535113-1', 'auto');
  ga('send', 'pageview');

    </script>
 </body>
 </html>
	<!DOCTYPE html>

	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Non-overlapping Layout</title>
	<style>

	.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;
	}

	</style>
	</head>
	<body>
	<a href="../index.html">cola.js home</a>
	<h1>Disconnected graph with non-overlap constraints</h1>
	<script src="../extern/d3v4.js"></script>
	<script src="../cola.min.js"></script>
	<script>
	var width = 960,
	height = 500;

	var color = d3.scaleOrdinal(d3.schemeCategory20);

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

	var cola = cola.d3adaptor(d3)
	.linkDistance(120)
	.avoidOverlaps(true)
	.size([width, height]);
	//
	// cola
	// .nodes(graph.nodes)
	// .links(graph.links)
	// .constraints(graph.constraints)
	// .symmetricDiffLinkLengths(5)
	// .avoidOverlaps(true)
	// .start(10,15,20);

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

	d3.json("graphdata/fivenodesdisconnected.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
	.nodes(graph.nodes)
	.links(graph.links)
	// .constraints(graph.constraints)
	// .symmetricDiffLinkLengths(5)
	.avoidOverlaps(true)
	.start(10,15,20);

	// 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;
	// });
	// });
	});

	</script>
	<p>Since node 'e' is not connected to the rest of the graph, it does not influence the layout of the connected component
	except through constraints. In this case, we generate constraints to prevent node boxes from overlapping. Try dragging 'e'
	so that it collides with the other nodes.
	</p>
	<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-63535113-1', 'auto');
	ga('send', 'pageview');

	</script>
	</body>
	</html>