dandiebolt/D3DargeERDiagram.html

## D3DargeERDiagram.html

<!doctype html>

<html>
  <head>
    <script src="https://haversineconsulting.quickbase.com/db/bf3zb9bph?a=dbpage&pagename=d3.v3.min.js"></script>
    <script src="https://haversineconsulting.quickbase.com/db/bf3zb9bph?a=dbpage&pagename=dagre-d3.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

    <link rel="stylesheet" href="https://haversineconsulting.quickbase.com/db/bf3zb9bph?a=dbpage&pagename=style.css">

    <script>
      $(function() {

        var dbidApp = document.location.pathname.split("/")[2];
        $("<iframe>", {
          id: "myiframe",
          src: dbidApp,
          style: "display: none;"
        }).prependTo("body");

        $("#myiframe").on("load", function() {

          var gTableInfo = document.getElementById("myiframe").contentWindow.gTableInfo;
          var rinfo = document.getElementById("myiframe").contentWindow.rinfo;

          var g = new dagreD3.graphlib.Graph()
            .setGraph({})
            .setDefaultEdgeLabel(function() { return {}; });

          var tables = _.pluck(gTableInfo, "name");
          for (var i=0; i < tables.length; i++) {
            g.setNode(i,  { label: tables[i], class: "type-Table"});
          }

          g.nodes().forEach(function(v) {
            var node = g.node(v);
            node.rx = node.ry = 5;
          });

          var dbidToTableIndex = _.invert(Object.keys(gTableInfo));

          var relationships = _.map(rinfo, function(val, key) {
            return {master: val.mdbid, details: val.ddbid};
          });

          for (var i=0; i < relationships.length; i++) {
            mIndex = dbidToTableIndex[relationships[i].master];
            dIndex = dbidToTableIndex[relationships[i].details];
            g.setEdge(mIndex, dIndex);
          }

          var render = new dagreD3.render();
          var svg = d3.select("svg");
          var svgGroup = svg.append("g");
          render(d3.select("svg g"), g);
          var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
          svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
          svg.attr("height", g.graph().height + 40);

        });

      });
    </script>

  </head>

  <body>
    <svg id="svg-canvas" width=100%>
    <!-- <svg id="svg-canvas" width="1920" height="1080"></svg> -->
    <!--<iframe id="myiframe" src="bf3zb9bph" style="display: none;"></iframe>-->
  </body>
</html>

	<!doctype html>

	<html>
	<head>
	<script src="https://haversineconsulting.quickbase.com/db/bf3zb9bph?a=dbpage&pagename=d3.v3.min.js"></script>
	<script src="https://haversineconsulting.quickbase.com/db/bf3zb9bph?a=dbpage&pagename=dagre-d3.js"></script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

	<link rel="stylesheet" href="https://haversineconsulting.quickbase.com/db/bf3zb9bph?a=dbpage&pagename=style.css">

	<script>
	$(function() {

	var dbidApp = document.location.pathname.split("/")[2];
	$("<iframe>", {
	id: "myiframe",
	src: dbidApp,
	style: "display: none;"
	}).prependTo("body");

	$("#myiframe").on("load", function() {

	var gTableInfo = document.getElementById("myiframe").contentWindow.gTableInfo;
	var rinfo = document.getElementById("myiframe").contentWindow.rinfo;

	var g = new dagreD3.graphlib.Graph()
	.setGraph({})
	.setDefaultEdgeLabel(function() { return {}; });

	var tables = _.pluck(gTableInfo, "name");
	for (var i=0; i < tables.length; i++) {
	g.setNode(i, { label: tables[i], class: "type-Table"});
	}

	g.nodes().forEach(function(v) {
	var node = g.node(v);
	node.rx = node.ry = 5;
	});

	var dbidToTableIndex = _.invert(Object.keys(gTableInfo));

	var relationships = _.map(rinfo, function(val, key) {
	return {master: val.mdbid, details: val.ddbid};
	});

	for (var i=0; i < relationships.length; i++) {
	mIndex = dbidToTableIndex[relationships[i].master];
	dIndex = dbidToTableIndex[relationships[i].details];
	g.setEdge(mIndex, dIndex);
	}

	var render = new dagreD3.render();
	var svg = d3.select("svg");
	var svgGroup = svg.append("g");
	render(d3.select("svg g"), g);
	var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;
	svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");
	svg.attr("height", g.graph().height + 40);

	});

	});
	</script>

	</head>

	<body>
	<svg id="svg-canvas" width=100%>
	<!-- <svg id="svg-canvas" width="1920" height="1080"></svg> -->
	<!--<iframe id="myiframe" src="bf3zb9bph" style="display: none;"></iframe>-->
	</body>
	</html>