Dagre question flow example (pure js, node tooltip working)

by armyofda12mnkeys

HTML

<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<svg width="1000" height="1000">
    <g></g>
</svg>

<div id="tooltip_template"></div>

CSS

body {
  font: 300 14px 'Helvetica Neue', Helvetica;
}

.node rect,
.node circle {
  stroke: black;
  fill: #CCC;
  border-radius: 25px;
}

.node.qualify rect,
.node.qualify circle {
  stroke: green;
  fill: lime;
}

.node.disqualify rect,
.node.disqualify circle {
  stroke: darkred;
  fill: red;
}

.node.both rect,
.node.both circle {
  stroke: fuchsia;
  fill: yellow;
}

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

#tooltip_template {
  position: "absolute";
}

/*
.node text {
  pointer-events: none;
}

.tipsy .name {
  font-size: 1.5em;
  font-weight: bold;
  color: #60b1fc;
  margin: 0;
}

.tipsy .description {
  font-size: 1.2em;
}
*/

JavaScript

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

var nodes = [ 
{'qs_code':"QS1", 'hovertext': 'This is QS1', 'proto_logic_type': 'none' },
{'qs_code':"QS2", 'hovertext': 'This is QS2', 'proto_logic_type': 'disqualify'},
{'qs_code':"QS3", 'hovertext': 'This is QS3', 'proto_logic_type': 'qualify'},
{'qs_code':"QS4", 'hovertext': 'This is QS4', 'proto_logic_type': 'both'},
{'qs_code':"QS5", 'hovertext': 'This is QS5', 'proto_logic_type': 'none'},
{'qs_code':"QS6", 'hovertext': 'This is QS6', 'proto_logic_type': 'none'}
];

// Automatically label each of the nodes
nodes.forEach(function(node) {
    g.setNode(node.qs_code, { label: node.qs_code, shape: "circle", class: [node.proto_logic_type], hovertext: node.hovertext  });  //style: 'fill: red' 
});

// Set up the edges
g.setEdge("QS1", "QS2", { label: "Rule1", hovertext:"A>B" });
g.setEdge("QS1", "QS3", { label: "Rule2", hovertext:"A<B" });
g.setEdge("QS1", "QS4", { label: "Rule3", hovertext:"A==B" });

g.setEdge("QS2", "QS5", { label: "Rule1", arrowhead: "vee", hovertext:"(A+B)>1" });

g.setEdge("QS3", "QS5", { label: "Rule1", hovertext:"(A-B)<2" });
g.setEdge("QS3", "QS6", { label: "Rule2", hovertext:"(A*B)>=3" });

g.setEdge("QS4", "QS6", { label: "Rule2", arrowhead: "vee", hovertext:"(A>10)||(B<20)" });


var svg = d3.select("svg"),
    inner = svg.select("g");

// Set the rankdir
g.graph().rankdir = 'TB';//'LR';
g.graph().nodesep = 50;

// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
      inner.attr("transform", "translate(" + d3.event.translate + ")" +
                                  "scale(" + d3.event.scale + ")");
    });
svg.call(zoom);

// Create the renderer
var render = new dagreD3.render();


// Run the renderer. This is what draws the final graph.
render(inner, g);


var tooltip = d3.select("body")
	.append("div")
	.style("position", "absolute")
	.style("background-color", "white")
  .style("border", "solid")
  .style("border-width",...