mermaid

<!DOCTYPE html> <html> <head> <title>hover.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../../../doc-style.css" /> <script src="../../../doc-filelist.js"></script> <script> var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/bower_components/dagre-d3/demo/hover.html", defaultSidebar = true; </script> <script src="../../../doc-script.js"></script> <script src="../../../mermaid.js"></script> <link rel="stylesheet" href="../../../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#hover.html">hover.html</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="hover.html"> <h1> <a href="#hover.html" name="hover.html" class="pilcrow">¶</a>hover.html </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> </td> <td class="code highlight"><div class="highlight"><pre><!doctype html> <meta charset="utf-8"> <title>Dagre D3 Demo: Tooltip on Hover</title> <link rel="stylesheet" href="demo.css"> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="../build/dagre-d3.js"></script>  <link rel="stylesheet" href="tipsy.css"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="tipsy.js"></script> <h1>Dagre D3 Demo: Tooltip on Hover</h1> <style id="css"> text { font-weight: 300; font-family: "Helvetica Neue", Helvetica, Arial, sans-serf; font-size: 14px; } .node rect { stroke: #333; fill: #fff; } .edgePath path { stroke: #333; fill: #333; stroke-width: 1.5px; } .node text { pointer-events: none; } /* This styles the title of the tooltip */ .tipsy .name { font-size: 1.5em; font-weight: bold; color: #60b1fc; margin: 0; } /* This styles the body of the tooltip */ .tipsy .description { font-size: 1.2em; } </style> <svg width=960 height=600></svg> <section> The TCP state diagram (<a href="http://www.rfc-editor.org/rfc/rfc793.txt">source: RFC 793</a>) with hover support. Uses <a href="http://bl.ocks.org/ilyabo/1373263">tipsy JS and CSS</a> for the tooltip. </section> <script id="js"> // Create a new directed graph var g = new dagreD3.graphlib.Graph().setGraph({}); // States and transitions from RFC 793 var states = { CLOSED: { description: "represents no connection state at all.", style: "fill: #f77" }, LISTEN: { description: "represents waiting for a connection request from any " + "remote TCP and port." }, "SYN SENT": { description: "represents waiting for a matching connection " + "request after having sent a connection request." }, "SYN RCVD": { description: "represents waiting for a confirming connection " + "request acknowledgment after having both received and sent a " + "connection request." }, ESTAB: { description: "represents an open connection, data received " + "can be delivered to the user. The normal state for the data " + "transfer phase of the connection.", style: "fill: #7f7" }, "FINWAIT-1": { description: "represents waiting for a connection termination " + "request from the remote TCP, or an acknowledgment of the " + "connection termination request previously sent." }, "FINWAIT-2": { description: "represents waiting for a connection termination " + "request from the remote TCP." }, "CLOSE WAIT": { description: "represents waiting for a connection termination " + "request from the local user." }, CLOSING: { description: "represents waiting for a connection termination " + "request acknowledgment from the remote TCP." }, "LAST-ACK": { description: "represents waiting for an acknowledgment of the " + "connection termination request previously sent to the remote " + "TCP (which includes an acknowledgment of its connection " + "termination request)." }, "TIME WAIT": { description: "represents waiting for enough time to pass to be " + "sure the remote TCP received the acknowledgment of its " + "connection termination request." } }; // Add states to the graph, set labels, and style Object.keys(states).forEach(function(state) { var value = states[state]; value.label = state; value.rx = value.ry = 5; g.setNode(state, value); }); // Set up the edges g.setEdge("CLOSED", "LISTEN", { label: "open" }); g.setEdge("LISTEN", "SYN RCVD", { label: "rcv SYN" }); g.setEdge("LISTEN", "SYN SENT", { label: "send" }); g.setEdge("LISTEN", "CLOSED", { label: "close" }); g.setEdge("SYN RCVD", "FINWAIT-1", { label: "close" }); g.setEdge("SYN RCVD", "ESTAB", { label: "rcv ACK of SYN" }); g.setEdge("SYN SENT", "SYN RCVD", { label: "rcv SYN" }); g.setEdge("SYN SENT", "ESTAB", { label: "rcv SYN, ACK" }); g.setEdge("SYN SENT", "CLOSED", { label: "close" }); g.setEdge("ESTAB", "FINWAIT-1", { label: "close" }); g.setEdge("ESTAB", "CLOSE WAIT", { label: "rcv FIN" }); g.setEdge("FINWAIT-1", "FINWAIT-2", { label: "rcv ACK of FIN" }); g.setEdge("FINWAIT-1", "CLOSING", { label: "rcv FIN" }); g.setEdge("CLOSE WAIT", "LAST-ACK", { label: "close" }); g.setEdge("FINWAIT-2", "TIME WAIT", { label: "rcv FIN" }); g.setEdge("CLOSING", "TIME WAIT", { label: "rcv ACK of FIN" }); g.setEdge("LAST-ACK", "CLOSED", { label: "rcv ACK of FIN" }); g.setEdge("TIME WAIT", "CLOSED", { label: "timeout=2MSL" }); // Create the renderer var render = new dagreD3.render(); // Set up an SVG group so that we can translate the final graph. var svg = d3.select("svg"), inner = svg.append("g"); // 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); // Simple function to style the tooltip for the given node. var styleTooltip = function(name, description) { return "" + name + "" + description + ""; }; // Run the renderer. This is what draws the final graph. render(inner, g); inner.selectAll("g.node") .attr("title", function(v) { return styleTooltip(v, g.node(v).description) }) .each(function(v) { $(this).tipsy({ gravity: "w", opacity: 1, html: true }); }); // Center the graph var initialScale = 0.75; zoom .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20]) .scale(initialScale) .event(svg); svg.attr('height', g.graph().height * initialScale + 40); </script> <script src="demo.js"></script> </pre></div> </td> </tr> </tbody> </table> </div> </body> </html>