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

by lborgman

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: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA&amp;gt;BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule1</u>", hovertext:"A>B", labelType: "html" });
g.setEdge("QS1", "QS3", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA&amp;lt;BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule2</u>", hovertext:"A<B", labelType: "html" });
g.setEdge("QS1", "QS4", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){...