alienrobotwizard · March 27, 2014 20:43
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <html>  
  <head>
    <meta charset="utf-8">
  </head>

  <style>

    svg {
        overflow: hidden;
    }

    text {
        font-weight: 300;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
        font-size: 12px;
    }

    .node rect {
        stroke-width: 1px;
        stroke: #333;
        fill: #fff;
    }

    .edgePath path {
        stroke: #333;
        stroke-width: 1.5px;
        fill: none;
    }

  </style>
  <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://cpettitt.github.io/project/graphlib/latest/graphlib.min.js"></script>
    <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
    <script>
      var width = 960;
      var height = 700;

      var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 4 + ")scale(1.5)")
      .append("g");
      
      var g = new graphlib.CDigraph();         
      var renderer = new dagreD3.Renderer();    
      
      g.addNode("G1", { label: "G1"});
      g.addNode("A", { label: "A" });
      g.addNode("B", { label: "B" });
      g.addNode("C", { label: "C" });
      
      g.parent("A", "G1");
      g.parent("B", "G1");
      g.parent("C", "G1");
      
      g.addNode("G2", { label: "G2"});
      g.addNode("D", { label: "D" });
      g.addNode("E", { label: "E" });
      g.addNode("F", { label: "F" });

      g.parent("D", "G2");
      g.parent("E", "G2");
      g.parent("F", "G2");
      
      g.addEdge(null, "A", "B");
      g.addEdge(null, "A", "C");
      g.addEdge(null, "B", "C");

      g.addEdge(null, "C", "D");
      g.addEdge(null, "B", "E");
      g.addEdge(null, "D", "F");
      g.addEdge(null, "E", "F");

      renderer.run(g, svg);
      
      var subGraphs = g.children(null); 
      var nodes = g.nodes().filter(function(u) { return u != "G1" && u != "G2" });

      for (var i = 0; i < subGraphs.length; i++) {
                          var subBox = {maxX:null, maxY:null, minX:null, minY:null};
                          
                          var subNodes = g.children(subGraphs[i]);
                          var subSelect = d3.selectAll("g.node").data(nodes, function(u) {return u;})
                          .filter(function(u) { return (subNodes.indexOf(u) >= 0); });
        
        subSelect.each(function(u) {
        var nodeBox = d3.select(this).node().getBBox();              
        var transform = d3.select(this).attr("transform");
        var points = transform.substring(10, transform.length-1).split(",").map(function(p) {return parseFloat(p);});                               
        
        var right = points[0]+nodeBox.width/2;
        var left = points[0]-nodeBox.width/2;                                
        var bottom = points[1]+nodeBox.height/2;
        var top = points[1]-nodeBox.height/2;
        
        if (right > subBox.maxX || subBox.maxX == null) { subBox.maxX = right; }
        if (left < subBox.minX || subBox.minX == null) { subBox.minX = left; }
                   if (bottom > subBox.maxY || subBox.maxY == null) { subBox.maxY = bottom; }
          if (top < subBox.minY || subBox.minY == null) { subBox.minY = top; }
                    });
                    
                    var cluster = svg.insert('g', ':first-child')
                    
                    cluster
                    .append('rect')
                    .attr('x', subBox.minX - 20)
                    .attr('y', subBox.minY - 20)
                    .attr('width', subBox.maxX - subBox.minX + 20*2)
                    .attr('height', subBox.maxY - subBox.minY + 20*2)
                    .attr('fill', '#e9e9e9')
                    .attr('stroke', 'black')
                    .attr('stroke-width', '1.5px')
                    .style('opacity', 0.6);
                    
                    }
                    
                    </script>
  </body>
 </html>
	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	</head>

	<style>

	svg {
	overflow: hidden;
	}

	text {
	font-weight: 300;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;
	font-size: 12px;
	}

	.node rect {
	stroke-width: 1px;
	stroke: #333;
	fill: #fff;
	}

	.edgePath path {
	stroke: #333;
	stroke-width: 1.5px;
	fill: none;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cpettitt.github.io/project/graphlib/latest/graphlib.min.js"></script>
	<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js"></script>
	<script>
	var width = 960;
	var height = 700;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 4 + ")scale(1.5)")
	.append("g");

	var g = new graphlib.CDigraph();
	var renderer = new dagreD3.Renderer();

	g.addNode("G1", { label: "G1"});
	g.addNode("A", { label: "A" });
	g.addNode("B", { label: "B" });
	g.addNode("C", { label: "C" });

	g.parent("A", "G1");
	g.parent("B", "G1");
	g.parent("C", "G1");

	g.addNode("G2", { label: "G2"});
	g.addNode("D", { label: "D" });
	g.addNode("E", { label: "E" });
	g.addNode("F", { label: "F" });

	g.parent("D", "G2");
	g.parent("E", "G2");
	g.parent("F", "G2");

	g.addEdge(null, "A", "B");
	g.addEdge(null, "A", "C");
	g.addEdge(null, "B", "C");

	g.addEdge(null, "C", "D");
	g.addEdge(null, "B", "E");
	g.addEdge(null, "D", "F");
	g.addEdge(null, "E", "F");

	renderer.run(g, svg);

	var subGraphs = g.children(null);
	var nodes = g.nodes().filter(function(u) { return u != "G1" && u != "G2" });

	for (var i = 0; i < subGraphs.length; i++) {
	var subBox = {maxX:null, maxY:null, minX:null, minY:null};

	var subNodes = g.children(subGraphs[i]);
	var subSelect = d3.selectAll("g.node").data(nodes, function(u) {return u;})
	.filter(function(u) { return (subNodes.indexOf(u) >= 0); });

	subSelect.each(function(u) {
	var nodeBox = d3.select(this).node().getBBox();
	var transform = d3.select(this).attr("transform");
	var points = transform.substring(10, transform.length-1).split(",").map(function(p) {return parseFloat(p);});

	var right = points[0]+nodeBox.width/2;
	var left = points[0]-nodeBox.width/2;
	var bottom = points[1]+nodeBox.height/2;
	var top = points[1]-nodeBox.height/2;

	if (right > subBox.maxX \|\| subBox.maxX == null) { subBox.maxX = right; }
	if (left < subBox.minX \|\| subBox.minX == null) { subBox.minX = left; }
	if (bottom > subBox.maxY \|\| subBox.maxY == null) { subBox.maxY = bottom; }
	if (top < subBox.minY \|\| subBox.minY == null) { subBox.minY = top; }
	});

	var cluster = svg.insert('g', ':first-child')

	cluster
	.append('rect')
	.attr('x', subBox.minX - 20)
	.attr('y', subBox.minY - 20)
	.attr('width', subBox.maxX - subBox.minX + 20*2)
	.attr('height', subBox.maxY - subBox.minY + 20*2)
	.attr('fill', '#e9e9e9')
	.attr('stroke', 'black')
	.attr('stroke-width', '1.5px')
	.style('opacity', 0.6);

	}

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